1

JavaScript

Topic To Be Covered

PAGE

1. Variable & Datatypes. 01

2. Operators & Conditional Statements. 04
3. Loops & Strings. 08
4. Arrays. 12
5. Functions. 13
6. Objects.
7. DOM & Events.
8. API Calls.

JavaScript is a Scripting language. We use it to give instructions to the computer.

We can run JavaScript in Console of the Browser.

Print: console.log(“”); or console.log(‘’)

To clear Console : CTRL + L

Variables in JavaScript: Variables are container for data.

Way to declare Variables in JavaScript: 1. Variable names are case sensitive.

2. Only Letters, Digits, Underscore and $ is allowed. (Even

Space are not Valid) .

3. Only a Letter, Underscore or $ should be 1st character.

4. Reserved words can’t be variable names.

Note: Null is a special value mean value is nothing but Undefined mean
there is a value but not defined yet.
 2

JavaScript is a dynamically type language i.e., you do not need to declare

data type first as other languages.
Variable declaration case: (i) Camel-Case: fullName
(ii) Snake-Case: full_name
(iii) Kabab Case: full-name
(iv) Pascal Case: FullName
Note: We use Camel Case for Variable Declaration as per convention.
Types of Variables :
1. var : Variable can be Re-Declared & Update. A global scope variable.
2. let : Variable cannot be Re-Declared but Updated. A block scope
variable.
3. const : Variable cannot be Re-Declared or Updated. A block scope
variable.
Note: Till 2015 we have only var as a variable but in 2015 ES6 (ECMA
SCRIPT 6) which provides us let & const.
As we know var has a global scope mean we can declare it anywhere in the
codes but let is a block scope variable i.e., it cannot be declared anywhere
in the code. We can only use it in a block area. In next block we can re-
declare it.
If you put let as let a; then output will be undefined but in const case we
cannot it shows an error.
Ex: Input: let a; Output: undefined
Input: const a; Output: Syntax Error
Data Types: (i) Primitive Data Types: 1. Number
2. String
3. Boolean
4. Undefined
5. Null
 3

6. BigInt
7. Symbol
(ii) Non-Primitive Data Types : 1. Object (Collection of Data)
2. Array
3. Function
4. Date
Way to declare object or Ex of Object:
let student={
fullName:”Sahil”,
class: 10
};
Way to access key value in JavaScript : (i) console.log(student[“fullName”]);

Output: Sahil

(ii) console.log(student.fullName); Output: Sahil

Way to check datatype of a value:

Input: typeof key;

Output : Number/ String/ Boolean/ Undefined/ Null/ BigInt/ Symbol/

Object
 4

Operators in JavaScript: Used to perform some operation on data.

1. Arithmetic Operator : (i) Addition (+)

(ii) Subtraction (-)
(iii) Multiplication (*)
(iv) Division (/)
(v) Modulus (%) (It provides Reminder not percentage)
(vi) Exponentiation (**)

Unary Operator: (vii) Increment :a. Post-Increment: variable ++

Ex: let a:4 Input: console.log(a++); Output: 4

Input: console.log(a); Output: 5

b. Pre-Increment: ++ variable

Ex: let a:4; Input: console.log(++a); Output: 5

(viii) Decrement: a. Post-Increment: variable –

Ex: let a: 4; Input: console.log(a--); Output: 4

Input: console.log(a); Output: 3

b. Pre-Increment: -- variable

Ex: let a:4; Input: console.log(--a); Output: 3

2. Assignment Operator: (i) “=”

Ex: Input: let a=3;

Console.log(a); Output: 3

(ii) “+=”

Ex: Input: let a=4;

a+=x; (a= a + x) Output: a + x

(iii)”-=”

(iv) “*=”

(v) “/=”

(vi) “%=”

(vii) “**”

3. Comparison Operator: (i) “==” (Equal to)

(ii) “!=” (NOT Equal to)
 5

(iii) “===” (Equal to with data types)

(iv) “!==” (NOT Equal to with type)

(v)”<”,”<=”,”>”,”=>”

Note: Output will be in Woolen type

4. Logical Operator: (i) “Logical AND &&” (There are two statements and they both
should be true so the output will be true otherwise false)

Ex: let a=34;

let b=”3”;

let c=a>b; (console.log (c); Output: True)

let d=b==3; (console.log(d); Output: True)

console.log(c &&d); Output: True

let a=34;

let b=”3”;

let c=a>b; (console.log (c); Output: True)

let d=b===3; (console.log(d); Output: False)

console.log(c &&d); Output: False

(ii)”Logical OR ||” (There are two statements and one of both at least
should be true so the output will be true otherwise false)

Ex: let a=34;

let b=”3”;

let c=a>b; (console.log (c); Output: True)

let d=b===3; (console.log(d); Output: False)

console.log(c||d); Output: True

let a=34;

let b=”3”;

let c=a<b; (console.log (c); Output: False)

let d=b===3; (console.log(d); Output: False)

 6

console.log(c || d); Output: False

(iii) Logical NOT ! (If the statement is true it will give FALSE and vise-versa):

Ex: let a=3;

Let b=4;

c=a>b; (console.log(c); Output: False)

console.log(!(c)); Output: True

let a=3;

let b=4;

let c=a<b; (console.log(c); Output: True)

console.log(!(c)); Output: False

5. Ternary Operator: Condition ? “True Output Value” : “False Output Value”

Ex: age>18 ? “Eligible TO Caste Vote” : “NOT Eligible TO Caste Vote”

Conditional Statements:

1. If statement:
mode=”Dark-Mode”;

let color;

if (mode === “Dark-Mode”) {

color = “Black”;

console.log(color); Output: Black

2. If-else statement:
mode=”Light”;
let color;
if (mode===”Light”) {
color=”White”;
}
else {
color=”Dark”;
}
 7

Console.log{color); Output: White

3. Else-if statement:
Mode=”Dark”
let color;
if (Mode==”Dark”){
color=”Black”;
}
else if (Mode==”White”){
color="Light”;
}
else (Mode=”Default”){
color=”Default”
}
console.log(color); Output: Dark
 8

Loops in JavaScript: Loops are used to execute a piece of code again & again

1. For loop: for (a=0;a<=5;a++){

console.log(a);

} Output: 0,1,2,3,4,5

sum= 0 ;

for(a=0;a<=5;a++){

sum= sum + a;

console.log(sum); Output: 15

2. While loop: a=0;

while(a<=5){
console.log(a);
a++
} Output: 1,2,3,4,5
sum=0
a=0
while(a<=5){

sum=sum+a;

a++
}
console.log(sum); Output: 15

3. Do-While loop:

let b=0;
do {
console.log(b);
b++;
} while(b<=5); Output: 0,1,2,3,4,5

let sumb=0;
let c=0;
do{sumb=sumb+c;
 9

c++;
} while(c<=5);
console.log(sumb); Output: 15

4. For of loop: (In for of loop we use only String or Array)

let fame= "Sahil";

for (let val of fame){

console.log(val);

} Output: S,a,h,I,l

let fame= "Sahil";

sizeofString=0

for (let val of fame){

console.log(val);

sizeofString++

console.log(sizeofString); Output: 5

5. For in loop: Only used for objects'

let a={
name: ”Sahil”,
class:10
};
for(let key in a){
console.log(key, a[key])
}; Output: name Sahil
class 10

String in JavaScript: String is sequence of characters used to represent text.

Note: String are immutable in JavaScript i.e., they can’t be changed.

Creating String: (i) let a=”Sahil”

(ii) let a=’Sahil’

String Length: a.length

String INDICE: str[0]

 10

Template Literals in JavaScript: A way to have embedded expressions in strings.

Ex: let a=`Sahil Kumar`

console.log(a);

String Interpolation: To create strings by doing substitution of placeholders.

Ex: let a={ template literals make all data type in

string this is known as string
fullName:”Sahil Kumar” interpolation.

Age:10

};

let output=`The Full NAME of the student is ${a.fullName} and Age is

${a.Age}`

console.log(output);

Output: The Full NAME of the student is Sahil Kumar and Age is 10

Escape Characters: (i)\n : New line

(ii) \t : Tab space

(iii) \\ : For single \

(iv) /’ : For single ‘

Ex: const quote = 'It\'s;

console.log(quote);

Output: It's

(v) Carriage Return (\r): Moves the cursor to the beginning of the line. It’s
mostly used in conjunction with newline characters to control how text is
displayed.
Ex: const text = "Hello World!\rGoodbye";
console.log(text);
Output: Goodbye World! Hello

String Method in JavaScript: These are built in function to manipulate a string.

(i) str.toUpperCase()
(ii) str.toLoweCase()
(iii) str.trim() // Remove whitespaces at start andnd
(iv) str.slice(start index, end index) //end index value not included
Ex: a="0123456"
 11

'0123456'
a.slice(1,4) Output: '123'
(v) str.concat(str2) //Joins string 2 with 1
(vi) str.replace/replaceAll(searchVal,newVal)
Ex: let a=12145;
Console.log(a.replace(“1”,”0”)) Output: 02145
let a=12145;
Console.log(a.replaceAll(“1”,”0”)) Output: 02045
(vii) str.charAt(index value)

Note: In JavaScript, strings are immutable, meaning they cannot be changed once
created.
 12

Array in JavaScript : Collection of Items (typeof Array=Object).

let heroes = [ “ironman”, “hulk”, “thor”, “batman” ];

let marks = [ 96, 75, 48, 83, 66 ];

let info = [ “rahul”, 86, “Delhi” ];

Note: In JavaScript, array are mutable, meaning they can be changed once created.

Array Indices:

Ex: let heroes = [ “ironman”, “hulk”, “thor”, “batman” ];

console.log(heroes[0]);

Change element in array:

a=[1,2,3,4,5]

a[0]=55

console.log(a) Output: 55,2,3,4,5

Printing all elements of an Array:

(i) via For loop:

Ex: let A=[“Sahil”,”Kumar”]
for(ind=0;ind<A.length;ind++){
console.log(A[ind]); Output: Sahil Kumar
(ii) via For of loop:
Ex: let A=[“Sahil”,”Kumar”]
For(let i of A){

Console.log(i); Output: Sahil Kumar

Array methods in JavaScript: arr=[“Tomato”,”Potato”]

(i) arr.push() (To add at the end)

Ex: console.log(arr.push(“Capsicum”,”Brinjal”);
Output: Tomato, Potato, Capsicum,
Brinjal
(ii) arr.pop() (To delete from end & return)
Ex: console.log(arr.pop()); Output: Potato
(iii) arr.unshift() (To add at start)

Ex: console.log(arr.unshift(“Brinjal”,88));

Output: Brinjal, 88, Tomato, Potato

 13

(iv) arr.shift() (To delete from start & return)

Ex: console.log(arr.shift()); Output: Potato
(v) arr.toString() (To convert array to string)
Ex: console.log(arr.toString());
Output: [‘Tomato’,’Potato’]
(vi) arr.concat(1st arr,2nd arr) (To add two arrays)
Ex: let a=[6,9,4]
console.log(arr.concat(arr,a));
Output: Tomato, Potato,6,9,4
(vii) arr.slice(startindex,endindex) (To return a piece of array)
Ex: console.log(arr.slice(0,1));
Output: Tomato
(viii) arr.splice(startindex,deletecount,newEl1….)
Ex: console.log(arr.splice(0,1,”Brinjal”));
Output: Potato, Brinjal
 14

Function in JavaScript: Block of code that performs a specific task, can be invoked(call)
whenever needed.

Function Creation: function functionName() {

Function Call:
//do some work
functionName();
}

Ex: function printNameFunction(){

console.log(`Hello`)

console.log(printNameFunction());

function functionName(PARAMETER1,PARAMETER2..){

//Do some work

console.log(argument1,argument2..);

Ex: function functionDemo(a,b){

console.log(a+b);

console.log(functionDemo(3,4)); Output: 7

Note: Function parameters are like local variables they are block scope elements of a
function.

Arrow Functions: Compact way of writing functions

Let a = functionName=(PARAMETER1, PARAMETER2…) =>{

//do some work

Ex: let sum=(a,b)=>{

return a+b

console.log(sum(1,2)); Output: 3
 15

Question: Create a function using the “function” keyword that takes a String as an
argument & returns the number of vowels in the string?

Answer:

Question: Repeat the same task again via arrow function to perform the same task.

Answer:

Note : In JavaScript function can be passed as parameters and we can also return the
value.
16