notes_javascript.md

Learning Javascript

Contents

1. Refer elements from HTML
2. Difference between var, let and const
3. Local Storage vs Session Storage vs Cookies
4. Strings in Javascript
5. Arrays in Javascript
6. forEach and for in loop in Javascript
7. Events
8. Prototype in Javascript

---

Refer elements from HTML

• Class Elements

let elements = document.getElementsByClassName ('class');

• Id Element

let element = document.getElementById ('id');

• HTML Tag

let elements = document.getElementsByTagName ('tag');

• CSS Selector

let elements = document.querySelectorAll ('css selector');

let element = document.querySelectorAll ('css selector')[i];

let element = document.querySelector ('css selector');

---

Difference between var, let and const

Var, Let, and Const in Javascript

Var, Let, and Const – What's the Difference?

	Var	Let	Const
Scope	Global or Functional	Block	Block
Re-declaration	✓	X	X
Updation	✓	✓	X
Initialization	default undefined	X	X
Declaration	X	X	must be initialized

---

Local Storage vs Session Storage vs Cookies

Storages

• Getting items from Local Storage

let item = localStorage.getItem ("key");

• Converting string received from Local Storage to array

let value = JSON.parse (item);

• Setting items to Local Storage

localStorage.setItem ("key", item);

• Converting array to string for local storage

let item = JSON.stringify (value);

• Removing whole key-value pair from Local Storage

localStorage.removeItem ("key");

---

Strings in Javascript

• String length

let str = "Some text here";

let len = str.length; // reutrns length of str

• Uppercase

str.toUpperCase ();

• Lowercase

str.toLowerCase ();

• Indexing

str.indexOf ('t'); // returns 1st occurance of 't' else -1

str.lastIndexOf ('t'); // returns last occurance of 't' else -1

str.charAt (n); // returns char at nth index of 0-based index string

• Substring

str.substring (m, n); // returns str from m to n-1 index
str.substring (n); // returns str from nth to last index

str.slice (m, n); // same as substring
str.slice (n); // if n is negative then returns last n char else same as substring

• Other

str.endsWith (text); // checks if str ends with text

str.includes (text); // checks if str includes text

str.split (delimiter); // returns array for string splitted over delimiter

---

Arrays in Javascript

• Push and Pop

const arr = [23, 43, 64, 12, 93, 20];

arr.push (num); // push element at end of array

arr.pop (); // pop element from end of array

• Unshift and Shift

arr.unshift (num); // push element at front of array

arr.shift (); // pop element from front of array

• Splice

arr.splice (m, n); // removes n elements from index m (inclusive)

• Other

arr.reverse (); // reverse the array

---

forEach and for in loop in Javascript

• forEach loop

let arr = [5, 2, 5, 6, 9, 1];

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

• for in loop

let obj = {
    name = "Atul Rustagi",
    age = 23,
    isActive = true
}

for (let key in obj) {
    console.log (`The ${key} of object is ${obj[key]}`);
}

---

Events

• Calling a function on event

let element = document.getElementById ('some-id');

element.addEventListener ("event", function (e) {
    // function body
})

element.addEventListener ("event", (e) => {
    // function body
})

element.addEventListener ("event", CallbackFunc);

function CallbackFunc (e) {
    // function body
}

• Prevent default behaviour

element.addEventListener ("event", (e) => {
    e.preventDefault ();
})

---

Prototype in Javascript

• Syntax

const proto = {
    changeName: function (newName) {
        this.name = newName;
    },
    changeRole: function (newRole) {
        this.role = newRole;
    }
    // other functions
}

// this creates object
const obj = Object.create (proto);
obj.name = "some name";
obj.role = "some role";

// this creates object
const obj = Object.create (proto, {
    name: {value: "some name", writable: true},
    role: {value: "some role"}
})

console.log (obj);