Javascript Notes:

semicolons used
dynamically typed language-> not a fixed datatype of a varaible like python

primitive data type:

1).Boolean:
var YES = true;
var NO = false;

if(YES){
alert("This code is executed");
}

2).Undefined:
var myvar; -> when we define a variable but don't specify its value then it
will be undefined variable.
alert(myvar);

3).String:
var str1 = "Manas Jayaswal";
var str2 = "Hello World";
sequence of characters stored inside double or single inverted comma.

4).Null:
var myvar = null;
alert(myvar);

5).Number:
var int = 100;
var hex = 0xfff;
var float = 100.5;
var exponential = 2.34e2;
var octal = 030;

6).Bigint:
var big_int = 324728349238n; // n must be written after writing the integer

User Defined Datatype:

functions and variables

we can use
console.log(typeof <variable name>);
to determine the datatype of the variable

variables:

Declaring a variable:
let name;

Initializing a variable:
name = "Manas Jayaswal";

Updating a variable:
name = "Ayush Jayaswal";

Camelcase
let firstName = "Manas";
Pascalcase
let LastName = "Jayaswal";
Snakecase
let middle_name = "Kumar";

In javascript we use camelcase conventionally.

We will use const keyword to fix the value.

const price = 99;

Operator in Javascript:
exponetiation operator -> **

relational operator:
equal to -> ==
strictly -> ===
for example 1=='1' -> true
and 1==='1' -> false

not equal to -> !=

strictly not equal to -> !==
for example
1!='1' -> false
1!=='1' -> true
1!=1 -> false
1!==1 -> false

var x = "7"

if-else statement:

if(condition){
console.log("code to if condition is true");
}else{
console.log("run some other code instead");
}

* If we give output using console log it won't be shown in the website it will be
shown in the console of developer tool.
* console.log(`${fruittype} is not present today`);

-> In Javascript we have five type of loops:

for loop
do while loop
while loop
for in loop
for of loop

1).For loop:
for(let i=0;i<10;i++){
console.log("Manas Jayaswal");
}

2).While loop:
let i = 0;
while(i<10){
console.log("Namaste, World");
i++;
}
3).Do-While loop:
let j = 10;
do{
console.log("Namaste, World");
}while(j<10);

4).for-in loop:

a).Using Objects:

let animal = {
name : "Zebra",
leg : 4
};

// we can access values using below two methods

console.log(animal.name); -> Zebra
console.log(animal["name"]); -> Zebra

// we can loop over keys or values using for in loop

for(let key in animal){

console.log(key,animal[key]); // we cannot use animal.key notation
here.
}

output->
name Zebra
leg 4

b).Using Arrays:

let names = ["Manas","Ayush","Shreyash"];

//we can access the elements using the below given method.

names[0] -> "Manas"

//we can't use dot notation here like names.0

//using loops

for(let index in names){

console.log(index,names[index]);
}

Output:
0 Manas
1 Ayush
2 Shreyash

**For of loop using Arrays: //For of loop is only made for arrays not for
objects

for(let name of names){

console.log(name);
}

Output:
 Manas
Ayush
Shreyash

**********Strings************

Concatanation:
"Manas" + "Jayaswal" = "ManasJayaswal"
"mjmanas" + 54 = "mjmanas54"
54 + 54 = 108

let numberString = "123";

Number(numberString) --> 23 //converting a string of numbers to number

let num = 3435;

num.toString() --> "3435" //converting a number to string of numbers

**Template literals:
let score = 10033;
console.log(`Your score is ${score}`);

// We can do addition and subtraction also inside template literals....

console.log(`5*2 is ${5*2}`);
Output:
5*2 is 10

********String Methods*********

a). str.length -> it returns the length of string.

b). str[index] -> it returns the element at that particular index.

c). str.indexOf("Jayaswal") -> it returns the index from where the word starts
inside the string.

d). str.slice(5,7) -> it returns the substring of str from index 5 to index 7-1=6

e). str.toUpperCase() -> it returns the string after making all the letters in the
capital form

f). str.toLowerCase() -> it returns the string after converting all the letters to
small case.

*********User Defined Datatype(Reference Datatype)**************

1).Objects:

let animal{
name : "Cow",
legs : 4
};

animal.name -> "Cow"

animal.legs -> 4
animal["name"] -> "Cow"
animal["legs"] -> 4

2).Arrays:

let names = ["Manas","Shreyash","Ayush"];

console.log(names.length) //returns the length of the array.

3).Functions:

function namasteWorld(){
console.log("Namaste World");
}

namasteWorld();

function helloName(name){
console.log(`hello ${name}`);
}

helloName();

function addition(a,b){
return a+b;
}

***********Coercion and Conversion**************

1).Conversion:

Q).what will be '5'+9

ans).it will be '59'

Any datatype can be converted into following data types:

a).String
b).Boolean
c).Number

a).String:
->Implicit Conversion:
123+''
->Explicit Conversion:
String(123)

String(123) //'123'
String(-12.3) //'-12.3'
String(null) //'null'
String(undefined) //'undefined'
String(true) //'true'
String(false) //'false'

b).Boolean:
->Impicit Conversion:
!!2 //If logical operator is used then it will autometically be
converted to boolean
if(2) {..........}
2 || 'hello'
 ->Explicit Conversion:
Boolean('') //false
Boolean(0) //false
Boolean(-0) //false
Boolean(NaN) //false
Boolean(null) //false
Boolean(undefined) //false
Boolean(false) //false
**On converting user defined datatypes(arrays,objects,function) into boolean
datatype, it will always be converted to true.

c).Number:
->Implicit Conversion:
+'123'
123 != '456'
4 > '5'
5/null
true | 0

->Explicit Conversion:
Number(null) //0
Number(undefined) //NaN
Number(true) //1
Number(false) //0
Number(" 12 ") //12
Number("-12.34") //-12.34
Number("\n") //0
Number(" 12s ") //NaN
Number(123) //123

***Some examples of implicity conversion:

->true + false = 1
->12/'6' = 2
->"number" + 15 + 3 = "number153"
->15 + 3 + "number" = "18number"
->[1] > null = true //[1] one means array containing number 1
->'true' == true //false
->'false' == false //false

******************Objects*************************

let lecture = 10;

let section = 3;
let title = 'Javascript';

const course = {
lecture : 10,
section : 3,
title : 'Javascript',
notes : {
intro: "Welcome to JS course."
},

enroll(){
console.log('You are successfully enrolled');
}

}
course.enroll();
console.log(course);

course.price = 999; //object course was declared as const, even though it can
be changed, because it is referencing data type.

console.log(course);

****************Factory Function*****************

function createCourse(){
return {
lecture : 10,
section : 3,
title : 'Javascript',
notes : {
intro: "Welcome to JS course."
},

enroll(){
console.log('You are successfully enrolled');
}

}
// return course;
}

//We can give variables from outside too..

for eg:

function createCourse(title){
return {
title : title,

enroll(){
console.log('You are successfully enrolled');
}

}
// return course;
}

const course = createCourse('Javascript');

console.log(course.title);

// Constructor Function

function Course(title){
this.title = title,
this.enroll = function(){
console.log("You are successfully enrolled..");
}
}

const course = new Course("Cpp"); //here new keyword is use to return the function
pointed by this to an empty variable, we can do it manually also, on removing new
keyword and placing a return this; inside the constructor function...

console.log(course.title);
course.enroll();

**Using delete property

->By using delete property we can delete things eg:

delete course.title
console.log(course.title) //output will be undefined

-> we can again define a function inside course object like:

course.checkEnrollment = function(){
console.log("You are successfully enrolled..");
}

***All primitive datatypes come under objects...

-> To find constructor function of any datatype we can use <name.constructor> to

find its constructor function

for example:
console.log(course1.constructor);
console.log(str.constructor);

***********************************************************************************
*********************
function Course(title){
this.title = title;
this.enroll = function(){
console.log("You are successfully enrolled...");
}
}

course1 = new Course("Javascript");

function createCourse(title){
return {
title : title,
enroll(){
console.log("You are successfully enrolled...");
}
}
}

course2 = createCourse("Python");
console.log(course1.title);
console.log(course1.constructor);
console.log(course2.title);
console.log(course2.constructor);

str = "Manas Jayaswal is gonna rock..";

const Course_1 = new Function('title',`

this.title = title;
this.enroll = function(){
console.log("You are successfully enrolled...");
}`
);

const course3 = new Course_1("Cpp");

console.log(course3.title);
console.log(course3.constructor);

***********************************************************************************
**************************
=>Pass by value and Pass by reference:

// Pass by value occurs in Primitive Datatypes

let number = 10;

let number_2 = number;
number = 15;

console.log(number,number_2);

// Pass by reference occurs in Reference Datatypes

const obj = {
num : 10
}
const obj_2 = obj;
obj.num = 15;
console.log(obj,obj_2);
obj_2.num = 10;
console.log(obj,obj_2);

***********************************************************************************
**************************

// But if we wanna use pass by value in Reference Datatype we can use below
methods:
//Method :1

course1 = {
title : "Javasript",
enroll(){
console.log("You are successfully enrolled...");
}
}

course2 = { ...course1 };
console.log(course1,course2);
course1.title = "Cpp";
console.log(course1,course2);

********************************************************

//Method :2

course1 = {
title : "Javasript",
enroll(){
console.log("You are successfully enrolled...");
}
}
course2 = Object.assign({},course1);

console.log(course1,course2);
course1.title = "Cpp";
console.log(course1,course2);

********************************************************

//Method :3

course1 = {
title : "Javasript",
enroll(){
console.log("You are successfully enrolled...");
}
}

console.log(course1,course2);

for(let key of Object.keys(course1)){

course1[key] = course2[key]
}
course1.title = "Cpp";
console.log(course1,course2);

***************************Objects Exercise***********************************
function Items(name,price,discount){
this.name = name;
this.discount = discount;
this.price = price;
this.showPrice = function(){
console.log(`The Price of the ${this.name} is ${this.price}`);
}
this.applyDiscount = function(){
this.price -= (this.price*(this.discount/100));
}
}

const football = new Items("Football",900,10);

football.showPrice();
football.applyDiscount();
football.showPrice();
football.applyDiscount();
football.showPrice();

***********************************************************************************
************

************Classes***************

// Classes behaves same as constructor function but they have different syntax

class Product{
constructor(name,price,discount){
this.name = name;
 this.price = price;
this.discount = discount;
}
applyDiscount = function(){ //methods should be written outside the
constructor
this.price -= (this.price*(this.discount/100));
}
showPrice = function(){
console.log(`The Price of the ${this.name} is ${this.price}`);
}
}

const pencil = new Product("Pencil",9,5);

pencil.showPrice();
pencil.applyDiscount();
pencil.showPrice();

**Getter and Setter functions--->

// getter and setter function

// using getter function we can access the value of any property of an object
// using setter function we can change the value of any property of an object

// the example is given below

class Product1{
constructor(name,price,discount){
this.name = name;
this.price = price;
this.discount = discount;
applyDiscount = function(){
this.price -= (this.price*(this.discount/100));
}
showPrice = function(){
console.log(`The Price of the ${this.name} is ${this.price}`);
}
}
applyDiscount = function(){ //methods should be written outside the
constructor
this.price -= (this.price*(this.discount/100));
}
showPrice = function(){
console.log(`The Price of the ${this.name} is ${this.price}`);
}
get getDiscountValue(){
return this.discount;
}
set setDiscountValue(value){
this.discount = value;
}
}

const pencil = new Product1("Pencil",9,5);

console.log(pencil.getDiscountValue); //the getDiscountValue is not accessed with
()
pencil.setDiscountValue = 10;
console.log(pencil.getDiscountValue); //the setDiscountValse too is not accessed
with ()
***Classes are preffered over constructor functions and factory functions due to
the extension of class, it means we can make subclass of any class.

//Example is given below..

class Product{
constructor(name){
console.log("Hey this line is executed");
this.name = name;
}
showName(){
console.log(`${this.name} is a product..`);
}
}

class Furniture extends Product{

constructor(name){
super(name);
}
showName(){
console.log(`${this.name} is a furniture..`);
}
}

*****************************Arrays*****************************************

//Declaration of array

const array = [1,2,3,4,5,6,7,8,9];

//Using Array objects

const array = new Array(1,2,3,4,5,6,7,8,9);

//Methods and Operations on array:

1).Push:

array.push(10) //appends 10 at the end of the array and returns the new length of
the array

2).Unshift:

array.unshift(0) //appends 0 at the front of the array and returns the new length
of the array

3).Pop:

array.pop(); //it removes the last element from the array and returns the removed
element

4).Shift:

array.shift(); //it removes the first element of the array and returns the
removed element

*********In Javascript single array can store values of different datatype and that
can be changed dynamically too.
5).indexOf: //it returns -1 if the value if not present at that particular domain

array.indexOf(<value whose first occurance index to be found>,<the index from where

searching should be started>);

6).lastIndexOf: //it returns -1 if the value if not present at that particular

domain

array.lastIndexOf(<value whose last occurance index to be found>,<the index from

where searching should be started>);

7).includes: //it returns boolean value true if it is present in the particular

domain otherwise false

array.includes(<value whose occurance to be found>,<the index from where searching

should start>);

**includes method won't work if the elements inside array are of referencing
datatype i.e. objects or arrays and hence we will use find methods for them to
detect

8).find:

const array = [
{
name : "Manas",
follower:400
},
{
name : "Shreyash",
follower:300
},
{
name : "Ayush",
follower:200
}
]

console.log(array.find(function(element){ //here the value element passed

inside the function is the element of the array finally the find method return the
element for which the function passes true to it
return element.follower === 300;
}));
sli
=> Arrow function:

console.log(array.find((element) => { //here we can write code as shown also

return element.follower === 300;
}));

or

console.log(array.find( element => element.follower === 300 ); //if we have

single parameter is passed then we can remove braces of (element) and since there
is only one line code inside the function then we can write it by removing return
keyword and curly braces
9).concate method:

console.log(arr1.concate("Manas"));
console.log(arr1.concate("Manas","Shreyash"));
console.log(arr1.concate(arr2));

10).slice method: //here slicing happens same as that in python

console.log(array.slice(1,3)); //in python array[1:3]

console.log(array.slice(3)); //in python array[3:]
console.log(array.slice(-3,-1)); //in python array[-3:-1]

11).spread operator:

//if we have to concatanate two arrays we can use method given below

arr3 = [...arr1,...arr2];

//if we have to copy the elements of arr1 in arr3 we can use the method given below

arr3 = [...arr1];

//we can write even the whole array like below

arr3 = [...[1,2,3,4],...[5,6,7,8]];

12).forEach method:

//we can use forEach method in place of loops in arrays

array.forEach(function(element,index){
console.log(element,index);
}));

13).join method:

console.log(array.join(<separator>)); //it joins all the elements of array into

a string using separator by default it is a comma (,)
let array = ['m','a','n','a','s'];
console.log(array.join()); //"m,a,n,a,s"

console.log(array.join('')); //"manas"

console.log(array.join(' ')); //"m a n a s"

14).split method: //it is method on string not on arrays

console.log(str.split(<separator>);

let str = "m_a_n_a_s";

console.log(str.split()); //['m_a_n_a_s']

console.log(str.split('_')); //['m','a','n','a','s']

15).filter method: //same as find method difference is that find method

returns the first element where the condition becomes true but in case of filter
method it returns the array of all those elements for which condition is true.
const array = [
{
name : "Manas",
follower:400
},
{
name : "Shreyash",
follower:300
},
{
name : "Ayush",
follower:200
}
]

console.log(array.find(element => element.followers > 100); //it returns the

first object in the array

console.log(array.filter(element => element.followers > 100); //it will return

array containing all the three elements of the array.

**the first parameter passed in the function inside find or filter method is the
element of the array whereas the second parameter passed is the index of element

console.log(array.filter((element,index) => element > index); //it will

return all the elements of the arrays in which elements are greater than there
index

16).map method: //we will use it when we have large number of buttons,
we somehow make all of them in array and apply operations, eventListeners on them
using ma

array = [1,2,3,4,5];

array_1 = array.map(x => x**2); //[1,4,9,16,25]

array_2 = array.map(x => x*3); //[3,6,9,16,25]

***********************************************************************************
**************************
buttons.map(btn => {
btn.addEventListener('click',btnFunction);
function btnFunction(event){
if(btn.textContent == "←"){
screen.textContent = screen.textContent.slice(0,
(screen.textContent.length)-1);
}
else if(btn.textContent == "="){
// console.log("hello");
screen.textContent = eval(screen.textContent);
}
else{
screen.textContent += btn.textContent;
}
}
});

***********************************************************************************
****************************
17).reduce method: //to find the sum of all the follower in the array

const total = array.reduce(function(prev,element){

return prev + element.follower;
},0) //the second argument we passed was the
inital value of total

console.log(total);

//the above code can be written as

const total = array.reduce((prev,element) => prev+element.follower , 0);

18).sort method:

const sortByName = array.sort((element1,element2)=>{ //using this we

can sort array in ascending order of names
if(element1.name > element2.name){
return 1;
}
if(element1.name < element2.name){
return -1;
}
return 0;
})

console.log(sortByName);

19).every method:

console.log(array.every(element => element.follower < 500)); //it returns

true when the condition is satisfied for all elements in the array otherwise false

20).some method:

console.log(array.some(element => element.follower < 200)); //it returns

true if the condition is true for atleast one element in the array

21).Destructuring of an array:

// Destructuring an array

const arr = [1,2,3,4];

let [first,second,third,fourth] = arr;

console.log(first); //1
console.log(second); //2
console.log(third); //3
console.log(fourth); //4

const arr1 = [1,2,3,4,5,6,7,8,9];

let [first,second,third,fourth,...others] = arr1;
console.log(first); //1
console.log(second); //2
console.log(third); //3
console.log(fourth); //4
console.log(others); //[5,6,7,8,9]
*****************************Scope*****************************************
console.log(window); => it gives us the window object

1).global scope:
//same as python

2).local scope:

//inside a function, same as python.

3).block scope: //inside curly braces

**we have to use let keyword or const keyword while defining variables in place of
var because it attaches with window object.
**these different properties of var and let will be visible in case of blocks not
in case of function.

//example is shown below...

var name = "Manas"; //by using var keyword variable name is attached to window
object and hence it can be chaged inside block
if(true){
var name = "Shreyash";
}
console.log(name); //the output will be Shreyash

let name = "Manas";

if(true){
let name = "Shreyash";
}
console.log(name); //the output will be Manas

if(true){
let xyz = "Manas";
}

console.log(xyz); //this will show an error

if(true){
var xyz = "Manas";
}

console.log(xyz); //this will give output Manas

**Lexical Scope=> it is basically about inheritence, it means properties of father

function is accessible inside chid function but vice-versa is not true.

function father(){
var x = "Manas";
//here variable x is accessible but not y.
function child(){
var y = "Shreyash";
 //here both variables x and y are accessible.
}
}

*******************************DOM
Manipulation*******************************************

**Document is a global variable present in the window object.

**when we take output from <console.log(document.body.childNodes)> we get an html
collection as output, it is like array but not an array we can't apply some
properties of array here like split etc.
but here we can use loops like in array.

=> we can convert it to array using

const array = Array.from(document.body.childNodes);

**In tables the hirarchy goes like

table => tBodies => rows => cells => textContent

** We can directly access rows from table tag.

**querySelector => used to select the first element with a particular classname or
id or tagname etc,
**querySelector => used to select all the elements with the particular classname or
id or tagname etc.

**getElement functions are live

**querySelector are static

**if we makes our attributes by our own then we can't access directly it in
javascript
=> like id and class are attributes and we make another attribute data inside
a tag then we can't access it inside the script tag
=> <li id="manas" data="abc">Manas<\li>
then on doing console.log(manas.id) we get output as manas which is the
id , but on doing console.log(manas.data) we get undefined as output.

**we have getAttribute and setAttribute for that purpose

=> console.log(manas.getAttribute('data')); //here manas is the id of

that element
manas.setAttribute('att-name','value');
console.log(manas.getAttribute('att-name'));

**we have hasAttribute to check whether a particulat attribute exists in that

element

=> console.log(manas.hasAttribute('data')); -> true

**to remove any attribute from an element we use removeAttribute

=> manas.removeAttribute('data');

**to get the map of all the attributes we use asttribute

=> console.log(manas.attributes());
**Methods to add a new element node or text node using javascript.

const newDiv = document.createElement('div');

const text = document.createTextNode("Manas Jayaswal");
//here body is the id of body tag not name of the tag means to use it we have
to make id inside body tag as body

body.append(newDiv); //it appends the newDiv inside the body tag

body.prepend(newDiv); //it prepends the newDiv inside the body tag
body.before(newDiv); //it adds the newDiv before the body tag as its
sibling
body.after(newDiv); //it adds the newDiv after the body tag as its
sibling
manas.replaceWith(newDiv); //it replaces the tag having id="manas" by newDiv,
we can't replace body since it is irreplacable
newDiv.remove(); //it removes the newDiv
newDiv.append(text); or newDiv.appendChild(text);

**If we want we can append the whole html code inside a tag.

newDiv.innerHTML(`<ul>
<li id="manas" data="valid">Manas</li>
<li>Shreyash</li>
<li>Ayush</li>
</ul>`); //this will appends the entire html code
inside the div tag

**to detect events we will use

idOfElement.addEventListener('<even_name>',<name_of_function>)

**to remove event listener we will use

idOfElement.removeEventListener('<even_name>',<name_of_function>)

**if we do console.log(this) inside function which is to be performed on having

event, it will print the element to which the eventListener is applied, it means
this will point to the element on which event listener is applied.

**the first parameter passed in the even function is the event object, we can
access it by below method =>

***********************The code from github*************************************

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation</title>
</head>

<body id="body" class="page main">

<!-- <div id="firstDiv" class="allDivs"> First Div</div> -->

<script>
 // const allDivs = document.querySelectorAll(".allDivs")
// console.log(allDivs)
</script>
<!-- <div class="allDivs"> Second Div</div>
<table>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table> -->
<button id="clickBtn">Click Me</button>
<script>
// Root Node
// console.log(document.documentElement)
// console.log(document.body)
// console.log(document.head)

// Childrens
// console.log(document.body.childNodes)
// console.log(document.body.children)
// for (node of document.body.children) {
// console.log(document.body.children)
// }
// console.log(document.body.firstChild)
// console.log(document.body.lastChild)
// console.log(document.body.firstElementChild)
// console.log(document.body.lastElementChild)
// const childrensOfBody = Array.from(document.body.children)
// console.log(childrensOfBody)

// Siblings
// const ulTag = document.body.children[0]
// const firstLi = ulTag.children[0]
// const secondLi = ulTag.children[1]
// console.log(secondLi.previousElementSibling.textContent)

// Table DOM Manipulation

// const tableTag = document.body.children[1]
// console.log(tableTag.tBodies[0].rows[0].cells[1].style = "background-
color:blue;")

// ID search
// element.style.background = "red"

// const ulTag = document.getElementById("element")

// ulTag.style.backgroundColor = "red"

// listItem = document.getElementsByClassName("list-item")
// console.log(document.getElementsByTagName("table"))

// const listItems = document.querySelectorAll('ul > li:nth-child(2)')

// console.log(listItems[0].textContent)
// console.log(allDivs)

// Attributes
 // console.log(element.getAttribute('data'))
// console.log(element.setAttribute('order-placed', 'pending'))
// console.log(element.removeAttribute('order-placed'))
// console.log(element.hasAttribute('order-placed'))
// console.log(element.attributes)

// Creating and Removing the node elements

// const newDiv = document.createElement('div')
// newDiv.innerHTML = `<ul id="element" data="valid">
// <li class="list-item">First element</li>
// <li class="list-item">Second element</li>
// <li class="list-item">Third Element</li>
// </ul>`
// const newText = document.createTextNode('Namaste World')
// newDiv.appendChild(newText)
// body.append(newDiv)
// body.prepend(newDiv)
// body.before(newDiv)
// body.after(newDiv)
// firstDiv.replaceWith(newDiv)
// firstDiv.remove()

// Manipulating Classes
// body.className = "second page"
// body.classList.add('new')
// body.classList.remove('new')
// body.classList.toggle('new')
// console.log(body.classList)

// Mainipulating Style
// body.style.color= "red"
// body.style['background-color']= "orange"
// body.style.margin= "200px"

// Events
function callMe(event){
console.log(event.type)
console.log(event.currentTarget)
console.log(event.clientY)
console.log(event.clientX)
alert("Thanks for Watching")
}
// clickBtn.onclick = callMe

clickBtn.addEventListener('click', callMe)
// clickBtn.addEventListener('click', function(){
// alert("Thanks")
// })
// clickBtn.removeEventListener('click',callMe)
// clickBtn.removeEventListener('click', function(){
// alert("Thanks")
// })
</script>
</body>

</html>