JavaScript in Hindi GLA
JavaScript in Hindi GLA
rishav.23bsa10148@[Link]
PY13J6TQ2L
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Table of Content
● What is JavaScript
● History
● Tools
● JS Hello World
● Comment
rishav.23bsa10148@[Link]
PY13J6TQ2L
● Variables
● Data Types
● Type Coercion
● JavaScript Properties
● Operators
● Conditional Statement
● Loops
● Arrays
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
What is JavaScript
● It is a verb of the web page that defines all the actions to be performed
on a webpage
● Its an object oriented programming language that uses JIT compiler
rishav.23bsa10148@[Link]
PY13J6TQ2L ● It is everywhere and all web browsers are installed with it.
● JS application ranges from web development, mobile development etc
● JS is easy, simple and very compatible with HTML-CSS
● It is must to have skill for any software engineer role
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
History
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Tools
For working with JavaScript, we just need 2 things
○ Text editor
■ For writing and editing of JS code, we need a simple
editor which can be notepad too.
rishav.23bsa10148@[Link] ■ But there are other powerful editors which provide
additional functionalities like autocomplete, indentation,
PY13J6TQ2L
highlights etc.
■ Example: Visual Studio Code, Sublime text, Atom etc.
○ Browser
■ All browsers come with an inbuilt JS engine.
■ They are used for executing JS code and also for
debugging purposes.
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
JavaScript Hello World
● Before jumping right into coding, lets understand different ways to
write js code
● JS basically gets merged into html which is a skeleton of web
page
● We can write our JS in 3 ways
○ Console
rishav.23bsa10148@[Link]
PY13J6TQ2L
■ Either just press Ctrl + Shift + I to open the console or
you can right click and then go to inspect
■ Now since you are in console you can start writing your
code
[Link]("hello world");
■ [Link] is used to print output
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
○ Script tag
■ <script> tag is used for writing javascript in HTML
directly.
■ But every [Link]() will print the output in console of
browser
<!DOCTYPE html>
<html>
<head>
rishav.23bsa10148@[Link]
PY13J6TQ2L <title>Home</title>
</head>
<body>
<h1>My First JS Code</h1>
<script>
[Link]("Hello World!");
</script>
</body>
</html>
This file is meant for personal use by rishav.23bsa10148@[Link] only.
Proprietary
Sharing content. © Great Learning.
or publishing All Rights Reserved.
the contents Unauthorized
in part or use orfor
full is liable distribution prohibited.
legal action.
○ External file
■ JS code is written in a separate file and is incorporated in the
html using <script> tag.
■ This is the most efficient way.
■ It also enforces reusability and keeps code short, simple and
easy to understand.
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Variables
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Naming Convention
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Data Types
● JS is a dynamically typed language and does not need to specify data type
explicitly of the variable.
● There are 5 primitive data types in JS
○ Number, String, Boolean, Undefined, Null
■ Example:
rishav.23bsa10148@[Link]
PY13J6TQ2L
var num=23; num undef
var string="hello"; 23 undefined
var boolean=true;
string nullValue
var undef; null
"hello"
var nullValue=null;
boolean
true
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Type Coercion
● Type coercion - when we are comparing 2 values of different types, the one
type will force other to change it type as well so that comparison can be made
possible
○ === can stop coercion
○ if(1){} //1 will be converted to true
○ [Link](param1,param2) is similar to === but it is different for some cases
such as
rishav.23bsa10148@[Link]
PY13J6TQ2L +0 === -0
true
[Link](+0,-0)
false
NaN==NaN
false
[Link](NaN,NaN)
true
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
JS Properties
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Unary Operators
○ It needs one operand
○ There are 2 major operators here i.e, increment and decrement and each
one have 2 variations of postfix and prefix
○ Increment - to increase the value by 1
■ postfix: first assign then increment
■ prefix: first increment then assign
■ Example
rishav.23bsa10148@[Link]
PY13J6TQ2L
Output
a<<b : 32
a>>b : 2
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Relational Operators
○ It comprises operators for comparisons
○ There are operators to check inequality i.e., < ,>, <=, >=
○ For equality check, we have 2 operators i.e., == and !=
○ Difference between == and ===
■ == allow type coercion i.e, one type can change into another at the time
of comparison
■ === does not allow type coercion
■ Note:
rishav.23bsa10148@[Link]
PY13J6TQ2L
● NaN==NaN
false
● NaN===NaN
false
● +0 == -0
true
● +0 === -0
true
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
○ Example: Output
[Link]('2=="2" : '+ (2=="2")); 2=="2" : true
[Link]('2==="2" : '+ (2==="2")); 2==="2" : false
[Link]('2!="2" : '+ (2!="2")); 2!="2" : false
[Link]('2!=="2" : '+ (2!=="2")); 2!=="2" : true
[Link]('2>"2" : '+ (2>"2")); 2>"2" : false
[Link]('2>="2" : '+ (2>="2")); 2>="2" : true
PY13J6TQ2L [Link]('2<"2" : '+ (2<"2"));
rishav.23bsa10148@[Link]
2<"2" : false
[Link]('2<="2" : '+ (2<="2")); 2<="2" : true
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Bitwise Operators
○ It computes by going bit by bit
○ Both side is checked irrespective of what first expression computes to
○ 4 major bit operators are:
■ & - bitwise and, which returns 1 if both bits are 1 else 0.
■ | - bitwise or, which returns 1 if either of bits is 1 else 0.
■ ^ - bitwise xor, which returns 1 if both bits are different else 0.
rishav.23bsa10148@[Link]
PY13J6TQ2L
■ ~ - bitwise not, which changes 1 to 0 and vice versa.
○ Example:
var a=8,b=2;
[Link]('a&b : '+ (a&b));
[Link]('a|b : '+ (a|b));
[Link]('a^b : '+ (a^b));
[Link]('~a : '+ (~a));
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Logical Operators
○ are used for conditions comparison that basically checks for the validity of
them
○ They are also used in loops as part of termination conditions.
○ If the first condition is enough to give the final verdict, it will not evaluate
the second one.
○ 3 operators are there:
■ && - logical AND, returns true when both conditions evaluates to true
rishav.23bsa10148@[Link]
PY13J6TQ2L
■ || - logical OR, returns true when either of the conditions evaluates to
true
■ ! - logical not, return true when condition evaluates to false
○ Example: Output
var a=true,b=false; a&&b : false
[Link]('a&&b : '+ (a&&b)); a||b : true
[Link]('a||b : '+ (a||b)); !a : false
[Link]('!a : '+ (!a));
This file is meant for personal use by rishav.23bsa10148@[Link] only.
Sharingcontent.
Proprietary or publishing the contents
© Great Learning. All Rights in part orUnauthorized
Reserved. full is liable
usefor legal action.
or distribution prohibited.
Assignment & Ternary Operators
○ Assignment operator(=) : is used to assign right hand side value to
left hand side variable.
○ Ternary operator(?:) : An alternative of if else. Condition is placed
before ? and if evaluates to true then LHS of colon gets executed
else RHS of colon will.
○ Example:
rishav.23bsa10148@[Link]
PY13J6TQ2L
var a=2;
[Link]('a=2 : '+ (a=2));
[Link]((a==2)?[Link]("ok"):[Link]("not ok"));
Output
a=2 : 2
ok
This file iscontent.
Proprietary meant© for personal
Great use
Learning. All by rishav.23bsa10148@[Link]
Rights only.
Reserved. Unauthorized use or distribution prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
Conditional Statements - if else
○ consist of 2 keywords, if and else
○ This is a way where there are 2 paths possible depending upon a condition
○ if condition manipulates to true then if gets executed otherwise code is else
will execute
○ you can multiple else if followed by else if there are more possible paths.
○ Also nested if and else are possible
○ Example:
rishav.23bsa10148@[Link]
PY13J6TQ2L vara=5,b=6;
if(a+b==11)
[Link]("equal");
else
[Link]("not equal");
Output
equal
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Conditional Statements - switch
○ It is an elegant way to replace multiple else-if
○ Syntax:
switch(expression)
{
rishav.23bsa10148@[Link]
case val: ... ;
PY13J6TQ2L
break;
case val: ... ;
break;
case val: ... ;
break;
default: ...;
}
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
○ Here depending upon the answer evaluated by the condition, case
code gets executed.
○ every case must be followed by break unless it is required not to as
per logic. Otherwise, all cases will start executing from the matched
case till either break is encountered or all cases gets exhausted
○ default is optional and holds the code which should be executed if no
rishav.23bsa10148@[Link]
PY13J6TQ2L
catches gets matched.
○ val can be integer, char or String in javascript.
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
○ Example:
var day="sun";
switch(day)
{
case "mon": [Link]("Today is monday");
break;
case "tues": [Link]("Today is tuesday");
break;
case "wed": [Link]("Today is
wednesday"); break;
rishav.23bsa10148@[Link]
PY13J6TQ2L
case "thurs": [Link]("Today is thursday"); break;
case "fri": [Link]("Today is friday");
break;
case "sat": [Link]("Today is saturday");
break;
case "sun": [Link]("Today is sunday");
break;
default : [Link]("day is invalid!");
This file is meant for personal use by rishav.23bsa10148@[Link] only.
} Proprietary
Sharing or publishing
content. ©the contents
Great in Rights
Learning. All part or full is Unauthorized
Reserved. liable for legal
use oraction.
distribution prohibited.
Loops - for
○ It is best to use when we know the specified number of times the
code should execute.
○ Syntax:
for( initialization; termination; updation){
}
rishav.23bsa10148@[Link]
PY13J6TQ2L ● initialization - is used to initialize the variable, which is being
used for iteration.
● termination - comprises conditions which determine till when
iteration will continue.
● updation - how our variable will get updated.
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
○ Example:
for(var i=0;i<5;i++)
[Link]("current value of i : "+i);
Output
rishav.23bsa10148@[Link]
PY13J6TQ2L current value of i : 0
current value of i : 1
current value of i : 2
current value of i : 3
current value of i : 4
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Loops - while
○ It is best to use when we know the specified expression depending
on whose value the code should execute.
○ Syntax:
while( expression ){
}
rishav.23bsa10148@[Link]
PY13J6TQ2L ● expression- is used to dictate the condition who is
responsible for loop continuation.
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
○ Example:
var i=0;
while(i<5){
[Link]("current value of i : "+i);
i++;
}
rishav.23bsa10148@[Link]
PY13J6TQ2L Output
current value of i : 0
current value of i : 1
current value of i : 2
current value of i : 3
current value of i : 4
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Loops - do while
○ It is best to use when we know that at least code must execute once
irrespective of the condition.
○ Syntax:
do{
}while( expression );
rishav.23bsa10148@[Link]
PY13J6TQ2L ● expression- is used to dictate the condition who is
responsible for loop continuation.
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
○ Example:
var i=0;
do{
[Link]("current value of i : "+i);
i++;
}while(i<5);
rishav.23bsa10148@[Link]
PY13J6TQ2L
Output
current value of i : 0
current value of i : 1
current value of i : 2
current value of i : 3
current value of i : 4
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Arrays
● It is used to store ordered data together.
● It is defined within square brackets( [ ] ) and can have elements of different types
var a=[1,true,'hello']
a[2]
"hello"
● You can also leave sime position
rishav.23bsa10148@[Link]
PY13J6TQ2L
var a=[2,3,,4]
a[2]
undefined
a
(4) [2, 3, empty, 4]
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Arrays
typeof(arr)
"object"
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Array Methods - Push and Pop
● They are used to add and delete elements from last respectively
● Example
let arr = [1,2];
[Link](3);
rishav.23bsa10148@[Link]
PY13J6TQ2L
arr
(3) [1, 2, 3]
[Link]();
arr
(2) [1, 2]
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Array Methods - Unshift and Shift
● They are used to add and delete elements from front respectively
● Example
let arr = [1,2];
[Link](3);
rishav.23bsa10148@[Link]
PY13J6TQ2L
arr
(3) [3, 1, 2]
[Link]();
arr
(2) [1, 2]
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Array Methods - Splice
● It used to add new elements in the array from specified to and from index
● Example
let arr = [1,2,3,4,5];
[Link](1,3,"hello");
arr
(3) [1, "hello", 5]
rishav.23bsa10148@[Link]
PY13J6TQ2L
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Array Printing
● Using forEach()
[Link](item => [Link](item+" "));
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Array Printing
● Using for of
for(item of arr)
[Link](item+" ");
● Using for in
● used for enumerables i.e, objects
rishav.23bsa10148@[Link]
PY13J6TQ2L
● it can also be used for iterables in which index acts as key
for(item in arr)
[Link](item+" ");
0
1
2
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Conclusion
● Introduction
● Variables
● Data Types
● Type Coercion
rishav.23bsa10148@[Link]
PY13J6TQ2L ● JavaScript Properties
● Operators
● Conditional Statement
● Loops
● Arrays
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
rishav.23bsa10148@[Link]
PY13J6TQ2L
Thank You
Proprietary
This file iscontent.
meant© for
Great Learning. All
personal use Rights
by Reserved. Unauthorized use or distribution prohibited.
rishav.23bsa10148@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.