Setup
Basic Variables
Functions - Scoping
Advanced Variables
Basic DOM
Control Flow
Asynchronous Code
Advanced DOM
Modules - Bundlers
Bonus
console.log("Hello Tansen!!!!")node script.js<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>npm i -g prettier-
Here
npmpackage manager -
imeans install -
-gmeans globalpackage installed globally
-
Using
letto create a variablelet favoriteNumber=7 console.log(favoriteNumber);
-
Updating the value of
favoriteNumberlet favoriteNumber=7 favoriteNumber=4 console.log(favoriteNumber);
-
Log multiple value in console
let a=1 let b=2 let c=3 console.log(a,b,c);
-
Assign other variable value
let a=1 let b=2 let c=3 console.log(a,b,c); let d=a console.log(d);
-
Usage of
typeof//number type let a=2 let b=1.5 console.log(typeof(a),typeof(b));
-
Math Operations
// math operations let a=2 let b=1.5 console.log(a+b); console.log(a-b); console.log(a*b); console.log(a/b);
-
Sum with rounding issue
// sum with rounding issue let c=1.2 let d=2.2 console.log(c+d); // output: 3.4000000000000004
-
Output a simple string
// Output a simple string let a= "Hello world" console.log(a);
-
Single and double quote in string
// Single and double quote in string let b = "Hello world 'Tansen' " console.log(b);
-
Concat string
// Concat string let c = "Hello" let d = "Tansen" console.log(c+" "+d);
-
Concat name in string
// Concat name in string let name="Tansen" console.log("My name is "+name);
-
Boolean true / false
// boolean true / false let a=true let b=false console.log(typeof a); console.log(typeof b);
-
Boolean logic
// boolean logic console.log(true && false); console.log(true || false); console.log((false && false)||true);
-
Invert logic with
!// invert logic with `!` let happy=true let fun=true console.log(happy&&fun); console.log(!happy); console.log(!!fun);
-
Null value
// null let b=null console.log(b); console.log(typeof b); //null type is object
-
Undefined value
// undefined let a=undefined console.log(a); console.log(typeof a); //undefined type is undefined
-
A variable without a value is
undefined// a variable without a value is `undefined` let c console.log(c);
-
Number comparison
// number comparison let a=1 let b=2 console.log(a==b); // false console.log(a!=b); // true console.log(a>b); // false console.log(a<b); // true
-
String comparison
// string comparison console.log("a"=="a"); // true console.log("a"=="b"); // false console.log("a"<"b"); // true console.log("a">"b"); // false
-
Boolean comparison
// boolean comparison console.log(true==true); // true console.log(true==false); // false console.log(false==false); // true
-
Null & undefined comparison
// null & undefined comparison console.log(null==null); // true console.log(undefined==undefined); // true console.log(null==undefined); // true
-
When a variable is no longer used it will cleaned up auto
let a = 1 console.log(a); let b = 2 console.log(b);
-
Single line comment
//// sum of a,b let a=1 let b=2 console.log(a+b);
-
Multi line comment
/**//* find sum of a,b find subtraction of a,b */ console.log(a+b); console.log(a-b);
-
Using
functionkeyword// Using `function` keyword function sayHi(){ console.log("Hi"); } sayHi()
-
Function parameter/argument
// Function parameter sum(a,b) / argument sum(2,4) function sum(a,b){ console.log(a+b); } sum(2,4)
-
Function output undefined when no argument passed
// Create a function that takes one argument (a person name) and print that out function showName(name){ console.log(name); } showName("Tansen") showName() // output undefined
-
Return function value
// Return function value function sum2(a,b){ return a+b } let result = sum2(3,4) console.log(result);
- Anything written after
return a+bwill be skipped
- Anything written after
-
Printing function
// printing function function printVariable(variable){ console.log(variable); } printVariable("A") console.log(printVariable);
-
Passing function as argument
// passing function as argument function printVariable(variable){ console.log(variable); } function func(x){ x("Hello") } func(printVariable)
-
Callback function
// callback function function sumCallback(a,b,callback){ // return a+b callback(a+b) } function handleSum(sum){ console.log(sum); } sumCallback(3,4,handleSum)
-
Passing callback function
// passing callback function function printGreetings(greet){ console.log(greet); } function helloGreet(name,callback){ callback("Hello "+name) } helloGreet("Tansen",printGreetings)
-
Passing anonymous function
// passing anonymous function function greeting2(name,callback){ callback("Hello "+name) } greeting2("Tansen",function(name){ console.log(name); })
-
Normal function to Arrow function
// Normal function function sum(a,b){ return a+b } console.log(sum(2,3)); // Arrow function let sumArrow= (a,b)=>{ return a+b } console.log(sumArrow(4,3));
-
Normal function to Arrow function simplified
// Normal function 02 function showName(name){ console.log(name); } showName("Tansen") // Arrow function 02 let showNameArrow=(name)=>{ console.log(name); } showNameArrow("tansen") // Arrow function more simplified let sumArrow2=(a,b)=>a+b console.log(sumArrow2(2,2));
-
Normal function to Arrow function with no parameter/argument
// Normal function with no parameter/argument function hi(){ console.log("Hi"); } hi() // Arrow function with no parameter/argument let hiArrow=()=>console.log("Hi") hiArrow()
-
Normal callback function to Arrow callback function
// Normal callback function function func(a,callback){ callback(a) } func(3,function showNum(num){ console.log(num); }) // Arrow callback function function func2(a,callback){ callback(a) } func2(4,num=>console.log(num))
-
Code debugging
// Code debugging function doStuff(a,b,name){ console.log(sum(a,b)); console.log(showName(name)); } function sum(a,b){ return a+b } function showName(name){ gg return "Hi "+name } doStuff(1,2,"Tansen")
- After running this code we can see the error in browser console
// Stack Trace (visible in browser) /* Uncaught ReferenceError: gg is not defined at showName (scripts.js:12:5) at doStuff (scripts.js:4:17) at scripts.js:16:1 */
- To see call stack we need to navigate to sources tab in browser
- There we can use the breakpoint->
pause on uncaught exception - Also we can create a breakpoint in code to debug and see how it executed
- After running this code we can see the error in browser console
-
Access function before defining it
-
In JavaScript all functions except arrow function are read first
-
It does not work with arrow function because variable never get hoisted
-
Normal function (Hoisting work)
// Hoisting console.log(sum(2,3)); function sum(a,b){ return a+b }
-
Arrow function (Hoisting doesn't work)
// console.log(sumArrow(3,3)); // error const sumArrow=(a,b)=>{ return a+b }
-
Entire file is a global scope
-
Where each function has its own scope which is local scope
// Scoping function sayHi(name) { console.log("Hi " + name); } let name = "Tansen" sayHi(name)
-
Locally
ais not defied or passed in function still find it from global scope// local scope function sayHi2(name) { console.log("Hi " + name + a); } let a = 1 sayHi2(name)
-
Local scope also can be defied using only
{} -
There is also nested scope
{{}}// {} scope { let b= 2 console.log(b); } { let c= 4 console.log(c); // console.log(b); // error } { let d=5 { let e = 6 console.log(e,d); } }
-
Function return inside a function
// Closures function show(variable){ let c = 3 return function func(variable2){ console.log(variable); console.log(variable2); console.log(c); } } let a=show(1) a(2)
-
It hold constant value
-
Not changeable
// Const const a = 1 // a =2 error console.log(a);
-
Old way to create variable
// Var var a = 1 console.log(a);
-
It can break scoping rule
// breaking scoping rule { var b = 1 console.log(b); } console.log(b);
-
Variable get hoisted as
undefined// hoisted as `undefined` console.log(c); var c = 4
-
Number
// Number Coercion // int parseInt("123"); // 123 parseInt("101", 2); // 5 (binary 101 is 5 in decimal) // Float parseFloat("123.45"); // 123.45 // Unary `+` operator +("123"); // 123 +("123.45"); // 123.45 +("abc"); // NaN (Not-a-Number)
-
String
// String Coercion String(123); // "123" String(true); // "true" String(null); // "null" // using `toString()` (123).toString(); // "123" (true).toString(); // "true" // Concatenation with a string 123 + "abc"; // "123abc" true + "abc"; // "trueabc"
-
Boolean
// Boolean Coercion Boolean(1); // true Boolean(0); // false Boolean(""); // false Boolean("non-empty"); // true Boolean(null); // false Boolean(undefined); // false // NOT operator twice !!1; // true !!0; // false !!"non-empty"; // true
-
Null
// Null Coercion Boolean(null); // false String(null); // "null" Number(null); // 0
-
Undefined
// Undefined Coercion Boolean(undefined); // false String(undefined); // "undefined" Number(undefined); // NaN
-
Coercion in Operations
// Coercion in Operations 5 + "5"; // "55" "5" + 5; // "55" // If operands are not numbers, they are coerced to numbers "5" - 2; // 3 "5" * "2"; // 10 "5" / "2"; // 2.5
-
==Vs===// Double equal vs triple equal { const a=1 const b="1" console.log(a==b); // true const c=0 // also true for `""` const d=false console.log(c==d); // true }
-
To prevent type coercion
===used// To prevent type coercion `===` used { const a=1 const b="1" console.log(a===b); // false const c=0 // also false for `""` const d=false console.log(c===d); // false }
-
Nothing is equal to
NaNconst a = parseInt("awfawgwa") console.log(a); // NaN console.log(a===NaN); // false
-
To check NaN
isNaNis used// NaN const a = parseInt("awfawgwa") console.log(a); // NaN console.log(a===NaN); // false console.log(isNaN(a)); // true
-
Creating an array
// Array const a =[1,2,3,4,5] console.log(a);
-
Accessing element by index
// accessing element by index console.log(a[0]); const array1=['a','b','c','d','e'] console.log(array1[2]); const array2=[ [1,2,3,4,5,6], [7,8,9,10], [11,12,13,14,15], ] console.log(array2[0][4]); console.log(array2[1][2]); console.log(array2[2][3]);
-
Adding element in array
// add element at the end a.push(6) console.log(a); // add array in array a.push([7,8,9]) console.log(a);
-
Get the length of an array
// length of array console.log(array2.length);
-
Without object
// Without object let name ="Tansen" const age = 24 const favoriteNumber = 7 console.log(name,age,favoriteNumber);
-
Creating object
// Creating object let person = { name: "Tansen", age: 24, favoriteNumber: 7, } console.log(person["name"]);
-
Adding function in object
// Adding function in object let person2 = { name: "Tansen", age: 24, favoriteNumber: 7, sayHi:function(){ console.log("Hi"); }, sayHi2(){ console.log("Hi 2"); } } person2.sayHi() person2.sayHi2()
-
Exercise
// Exercise /* Create an object called car with the properties 1. Make 2. Model 3. isUsed 4. Add a function makeNoise which logs out `Vroom` text */ let car={ make:"Car1", model:"v1", isUsed:false, makeNoise(){ console.log("Vroom"); } } console.log(car["make"]); console.log(car.model);
-
Adding object,array in object
// adding object,array in object let person3 = { name:"Tansen", hobbies:["Programming","Gaming"], address:{ street:"12323 street", city:"Dhaka", } } console.log(person3.address.city); console.log(person3.hobbies[1]);
-
Value
// Reference Vs Value // Value let a =10 let b ="Hi" let c =a c=c+1 console.log(a); console.log(c);
-
Reference (Array)
// Array reference let d=[1,2] let e=d e.push(3) console.log(d); console.log(e);
-
Reference (Object)
// Object reference let obj1={ name:"Tansen", age:24, } obj2=obj1 obj2.name="Nesnat" console.log(obj1); console.log(obj2);
- In browser we need to use
JSON.stringify(obj2)to see the object values
- In browser we need to use
-
Array methods does not modify original array
-
forEach method
// Array Methods // forEach method a=[1,2,3,4,5] a.forEach((number,index)=>{ console.log(index +" "+number); })
- It take 2 argument but in most use cases only one is used
number
- It take 2 argument but in most use cases only one is used
-
map method
// map method let result_map=a.map(number=>{ return number*2 }) console.log(result_map);
-
filter method
// filter method let result_filter=a.filter(number=>{ return number<3 }) console.log(result_filter);
-
find method
// find method let result_find=a.find(number=>{ return number<3 }) console.log(result_find);
-
some method
// some method let result_some=a.some(number=>{ return number>6 }) console.log(result_some);
- If any of the array element have the value then it will return true/false
-
every method
// every method let result_every=a.every(number=>{ return number>0 }) console.log(result_every);
- Every element of the array is checked
-
reduce method
// reduce method let result_reduce=a.reduce((sum,number)=>{ return sum+number },0) console.log(result_reduce);
- It take 2 arguments where first one need to be set default value
0
- It take 2 arguments where first one need to be set default value
-
includes method
// includes method let isTrue=a.includes(2) console.log(isTrue);
- If the array include that element than it will return true / false
-
It is used with backticks
${variable_name}// String Template Literals let name = "Tansen" let age= 24 console.log(`name is ${name} and age ${age}`);
-
Using new
// New And This // New const date= new Date() console.log(date); console.log(date.getFullYear());
-
Using this
// This // Normal function function User(name,age){ return { name:name, age:age, } } console.log(User("Tansen",24)); // function constructor function User2(name,age){ this.name=name this.age=age } const user1=new User2("Tansen",24) console.log(user1); // class construction class User3{ constructor(name,age){ this.name=name this.age=age } sayHi(){ console.log("Hi"); } } const user2=new User3("TT",7) console.log(user2); user2.sayHi()
-
Inline Script: This runs after all previous scripts and HTML have been parsed.
<script> console.log('Inline Script: This runs after all previous scripts and HTML have been parsed.'); </script>
-
Normal Script: This script blocks the HTML parsing until it finishes loading and executing.
-
Async Script: This script loads asynchronously and may run before or after other scripts.
-
Defer Script: This script is deferred until after the HTML is fully parsed.
-
It is global so using
windowkeyword or not it will workconsole.log(window); window.console.log('hi') window.addEventListener("resize",()=>{ console.log("resized"); }) alert("hi")
-
Get full html document
// Get full html document console.log(document);
-
Get only elements of the html document
// Get only elements of the html document console.log(document.documentElement);
-
Create new element in html document
// Create new element in html document const element = document.createElement("span") element.innerText="Hello World" document.body.appendChild(element)
-
Using
getElementByIdconsole.log(document.getElementById("div-id"));
- If id not valid
nullwill be printed in console
- If id not valid
-
Modifying id element
// Modifying id element const divWithId=document.getElementById("div-id") divWithId.style.color="red"
-
Modifying class element (❌)
// Modifying class element (❌) divWithClass.forEach(div=>{ console.log(div); })
- This won't work as
divWithClassis holding html collection not array elements
- This won't work as
-
Modifying class element (✅)
- To do this first we have to convert the html collection to array using
Array.form()// Modifying class element (✅) const divWithClassArray = Array.from(divWithClass) divWithClassArray.forEach(div=>{ console.log(div); div.style.color="green" })
- To do this first we have to convert the html collection to array using
-
We can directly modify without converting to array by accessing single element
// accessing html single element divWithClass[0].style.color="blue"
-
Get attribute element using
querySelector// Get attribute element using `querySelector` const dataAttributeElement = document.querySelector('[data-test]') console.log(dataAttributeElement);
-
Get class element using
querySelector// Get class element using `querySelector` const divWithClass = document.querySelector('.div-class') console.log(divWithClass);
-
Get class element using
querySelector// Get class element using `querySelector` const divWithClasses = document.querySelectorAll('.div-class') console.log(divWithClasses); divWithClasses.forEach(div=>{ console.log(div); div.style.color="red" })
-
Get input element using
querySelector// Get input element using `querySelector` const input = document.querySelector("body > input[type='Text']") console.log(input);
-
Add event listener in button
// Add event listener in button const btn =document.querySelector('[data-btn]') btn.addEventListener('click',()=>{ console.log("clicked"); })
-
Remove event listener in button
// Remove event listener in button function printClicked(){ console.log("Clicked"); } btn.addEventListener('click', printClicked) btn.removeEventListener('click',printClicked)
-
view all event
// view all event btn.addEventListener('click',e =>{ console.log(e) })
-
Input event
// Input event const input = document.querySelector('[data-input-text]') input.addEventListener('change',()=>{ console.log("changed") }) input.addEventListener('input',()=>{ console.log("text inputed") }) // Check input empty of not input.addEventListener('input',e=>{ console.log(e.target.value==="") })
-
form event prevent default behavior using
preventDefault()// form event prevent default behavior using `preventDefault()` const form = document.querySelector("[data-form]") form.addEventListener('submit',e=>{ e.preventDefault() console.log("form submitted") })
-
Removing default behavior of anchor tag link click using
preventDefault()// Removing default behavior of anchor tag link click using `preventDefault()` const link = document.querySelector("[data-link]") link.addEventListener("click",e=>{ e.preventDefault() console.log("Link clicked"); })
-
In arrow function this behave as global
-
In normal function this behave as local
// Additional Differences Between Arrow And Normal Functions const btn = document.querySelector('[data-btn]') btn.addEventListener('click', e=>{ console.log("Arrow This:"); console.log(this); }) btn.addEventListener('click', function (e){ console.log("Function This:"); console.log(this); }) // this and window both global scope console.log(this === window);
-
Get data attribute
DOMStringMap// Get data attribute `DOMStringMap` const test=document.querySelector("[data-test]") console.log(test.dataset);
-
Read individual data from data attribute
// Read individual data from data attribute console.log(test.dataset.test);
-
Change data attribute value (visible in elements tab of browser devtool)
// change data attribute value test.dataset.testTwo='321'
-
Button click count
// Button click count const btns = document.querySelectorAll('button') btns.forEach(btn=>{ // console.log(btn); btn.addEventListener("click",()=>{ // console.log(btn.dataset.clicks); const currentClicks=parseInt(btn.dataset.clicks) btn.dataset.clicks = currentClicks+1 }) })
-
Selecting and modifying grand parent
// Selecting and modifying grand parent const grandParent = document.querySelector('#grand-parent') console.log(grandParent); grandParent.style.color="red"
-
Get grand parent child and modify style from html collection
// Get grand parent child and modify style from html collection console.log(grandParent.children); const parentOne = grandParent.children[0] const parentTwo = grandParent.children[1] parentOne.style.color='blue' parentTwo.style.color='yellow'
-
Modifying child using element sibling
// modifying child using element sibling parentTwo2=parentOne.nextElementSibling parentTwo2.style.color='orange'
-
Get parent from child select
// get parent from child select const childOne = document.querySelector("#child-one") console.log(childOne); parentOne1=childOne.parentElement console.log(parentOne1);
-
Get grand parent from child select using closest
// get grand parent from child select using closest const grandParent1=childOne.closest("#grand-parent") console.log(grandParent1);
-
Step by step to-do list
// Select all element const form = document.querySelector('#new-item-form') const list = document.querySelector("#list") const input= document.querySelector("#item-input") // When submit the form add a new element form.addEventListener('submit', e =>{ e.preventDefault() console.log(input.value); // Create new item const item = document.createElement('div') if (input.value !==""){ item.innerText = input.value item.classList.add('list-item') console.log(item); // Add that item to the list list.appendChild(item) } // Clear input after adding input.value = "" // Setup event listener to delete item when clicked item.addEventListener("click", ()=>{ // list.removeChild(item) item.remove() }) })
-
Step by step modal walkthrough
/* TODO: 2. Select the elements with the following IDs * modal * open-modal-btn * close-modal-btn * BONUS: overlay */ const modal = document.querySelector('#modal') const openModalBtn = document.querySelector('#open-modal-btn') const closeModalBtn = document.querySelector('#close-modal-btn') const overlay = document.querySelector('#overlay') // TODO: 3. Create a click event listener for the open-modal-btn that adds the class "open" to the modal // BONUS: Also add the class "open" to the overlay openModalBtn.addEventListener("click",()=>{ modal.classList.add("open") overlay.classList.add("open") }) // TODO: 4. Create a click event listener for the close-modal-btn that removes the class "open" from the modal // BONUS: Also remove the class "open" from the overlay closeModalBtn.addEventListener("click",closeModal) // BONUS: Add a click event listener to the overlay that removes the class "open" from the modal and the overlay overlay.addEventListener("click",closeModal) // function to close modal function closeModal(){ modal.classList.remove("open") overlay.classList.remove("open") }
-
if else
// if else const userIsLoggedIn =true const isOnDashboard = true if (userIsLoggedIn && isOnDashboard){ console.log("User logged in."); } else{ console.log("Please login."); }
-
0,"",undefined,nullcount as false// `0`,`""`,`undefined`,`null` count as false if (0){ console.log("True"); }else{ console.log("False"); }
-
Exercise
/*Exercise: Create a variable that contains an array. Using an if statement with else if I want you to check the length of the array If it is empty print out "empty" If it has less than 5 elements print out "small" If it has less than 10 elements print out "medium" Otherwise print out "large" */ const arr=[2,3,4,1,3,5,6,7,8,9,11] arr_length = arr.length if (arr_length === 0){ console.log("empty"); }else if(arr_length<5){ console.log("small"); }else if(arr_length<10){ console.log("medium"); } else{ console.log("large"); }
-
Single line condition
// Normal if-else const isUserLoggedIn=true if (isUserLoggedIn){ console.log("User is logged in"); } if (isUserLoggedIn)console.log("User is logged in"); // Ternary Operator isUserLoggedIn ? console.log("User is logged in") : console.log("Not logged in");
-
If else to switch statement
// if else const favoriteAnimal = "Cat"; if (favoriteAnimal == "Cat") { console.log("cats are pretty cool"); } else if (favoriteAnimal == "Dog") { console.log("They are loud"); } else if (favoriteAnimal == "Elephant") { console.log("Interesting choice"); } else { console.log("Cool but unfamiliar"); } // using switch switch (favoriteAnimal) { case "TCat": case "Cat": console.log("cats are pretty cool"); break; case "Dog": console.log("They are loud"); break; case "Elephant": console.log("Interesting choice"); break; default: console.log("Cool but unfamiliar"); }
-
Exercise
/* Exercise Create a switch that checks to see the value of the number variable If the number is 0 print out "it is zero" If the number is 1 or 2 print out "it is small" If the number is 3 or 4 print out "it is medium" If the number is 5 print out "it is large" If the number is none of these print out "try again" */ const num = 3 switch(num){ case 0: console.log("it is zero"); break case 1: case 2: console.log("it is small"); break case 3: case 4: console.log("it is medium"); break case 5: console.log("it is large"); break default: console.log("try again"); }
-
For loop
// for loop for(let i=0;i<5;i++){ console.log("Hi"); }
-
Loop through array using for loop
// loop through array using for loop const arr=[1,2,3,4,5,6] for(let i=0;i<arr.length;i++){ console.log(arr[i]); }
-
Loop through array using
forEach// loop through array using `forEach` arr.forEach(num=>{ console.log(num); })
-
Exercise
/* Exercise Create a for loop that loops from 0 to 10 and prints out all values from 0 to 10 Modify this loop and exit the loop when the value is equal to 5 by using break */ for(let i=0;i<=10;i++){ console.log(i); if (i===5) break }
-
For loop to while loop
// for loop for(let i=0;i<5;i++){ console.log(i); } // while loop let j=0 while(j<5){ console.log(j); j++ }
-
Example
// Example const person = { name:'Tansen', friend:{ name:'Boch', friend:{ name:'Sally', } } } let currentPerson=person while(currentPerson!=null){ console.log(currentPerson.name); currentPerson=currentPerson.friend }
-
Stack Overflow Error
// Stack Overflow Error function printHi(){ console.log("Hi"); printHi() } printHi()
-
Example 01 countdown
// Example 01 countdown // for loop for (let i=1;i<=10;i++){ console.log(i); } // using recursion function printNumber(number){ if (number>10) return console.log(number); printNumber(number+1) // console.log(number); } printNumber(1) function countDown(num){ if (num<0){ return console.log("Whats up"); } console.log(num); countDown(num-1) } countDown(10)
-
Example 02 sum
// Example 02 sum function sum(num){ if (num<=0){ return 0 } return num+sum(num-1) } console.log(sum(5));
-
Example 03 person names
// Example 03 person names const person={ name:"Tansen", friend:{ name:"Boch", friend:{ name:"Shakil", } } } let currentPerson=person while(currentPerson!=null){ console.log(currentPerson.name); currentPerson=currentPerson.friend } // using recursive function showName(currentPerson){ if (currentPerson==null){ return } console.log(currentPerson.name); showName(currentPerson.friend) } showName(person)
-
Logical AND (
&&)// Logical AND (`&&`) function expensiveFunction() { console.log("Expensive function called"); return true; } let condition = false; if (condition && expensiveFunction()) { console.log("Condition is true and expensiveFunction returned true"); } else { console.log("Condition is false or expensiveFunction returned false"); }
-
Logical OR (
||)// Logical OR (`||`) function fallbackValue() { console.log("Fallback function called"); return "default"; } let value = null; let result = value || fallbackValue(); console.log(result);
-
Conditional Execution
// Conditional Execution let user = { name: "Alice", isAdmin: true }; user.isAdmin && console.log(`${user.name} is an admin`);
-
Function Argument Defaults
// Function Argument Defaults function greet(name) { name = name || "Guest"; console.log(`Hello, ${name}!`); } greet("John"); // Output: Hello, John! greet(); // Output: Hello, Guest!
-
Quiz app walkthrough step by step
/* TODO: 2. Select all elements needed * The form element (has the id `quiz-form`) * The answer inputs (have the class `answer`) * BONUS: The questions (have the class `question-item`) * BONUS: The alert (has the id `alert`) */ const form = document.querySelector("#quiz-form") const answers=Array.from(document.querySelectorAll(".answer")) // HTML collection converted to array const questions=document.querySelectorAll(".question-item") const alert=document.querySelector("#alert") // TODO: 3. Create a submit event listener for the form that does the following. form.addEventListener("submit",e=>{ // 1. Prevent the default behaviour e.preventDefault() // 6. BONUS: Make sure unanswered questions show up as incorrect. The easiest way to do this is to add the incorrect class and removing the correct class from all question items before checking the correct answers questions.forEach(question=>{ question.classList.add("incorrect") }) // 2. Get all selected answers (use the `checked` property on the input to determine if it is selected or not) const checkedAnswers=answers.filter(answer=>answer.checked) console.log(checkedAnswers); // 3. Loop through the selected answer to see if they are correct or not (Check the value of the answer to see if it is the string "true") checkedAnswers.forEach(answer=>{ const isCorrect = answer.value === "true" const questionItem=answer.closest(".question-item") // 4. For each correct answer add the class `correct` to the parent with the class `question-item` and remove the class `incorrect`. if (isCorrect){ questionItem.classList.add("correct") questionItem.classList.remove("incorrect") }else{ // 5. For each incorrect answer add the class `incorrect` to the parent with the class `question-item` and remove the class `correct`. questionItem.classList.add("incorrect") questionItem.classList.remove("correct") } // 7. BONUS: If all answers are correct show the element with the id `alert` and hide it after one second (look into setTimeout) (use the class active to show the alert and remove the class to hide it) const allCorrect=checkedAnswers.every(answer=> answer.value === "true") const allAnswered = checkedAnswers.length === questions.length console.log(allCorrect); if (allCorrect && allAnswered){ alert.classList.add("active") setTimeout(()=>{ alert.classList.remove("active") },1000) } }) })
-
Form validation walkthrough step by step
// TODO: Select all elements needed // Use the HTML to figure out what classes/ids will work best for selecting each element const form = document.querySelector("#form") const usernameInput=document.querySelector("#username") const passwordInput=document.querySelector("#password") const passwordConfirmInput=document.querySelector("#password-confirmation") const termsInput=document.querySelector("#terms") const errorsContainer=document.querySelector(".errors") const errorsList=document.querySelector(".errors-list") // TODO: Create an event listener for when the form is submitted and do the following inside of it. form.addEventListener("submit",e=>{ // TODO: Create an array to store all error messages and clear any old error messages const errorMessages=[] clearErrors() // TODO: Define the following validation checks with appropriate error messages // 1. Ensure the username is at least 6 characters long if (usernameInput.value.length<6){ errorMessages.push("Username must be at least 6 characters") } // 2. Ensure the password is at least 10 characters long if (passwordInput.value.length<10){ errorMessages.push("Password must be at least 10 characters") } // 3. Ensure the password and confirmation password match if (passwordInput.value!==passwordConfirmInput.value){ errorMessages.push("Password and confirmation password not matched") } // 4. Ensure the terms checkbox is checked if (!termsInput.checked){ errorMessages.push("Term checkbox is not checked") } console.log(errorMessages); if (errorMessages.length>0){ e.preventDefault() showErrors(errorMessages) } // TODO: If there are any errors then prevent the form from submitting and show the error messages }) // TODO: Define this function function clearErrors() { // Loop through all the children of the error-list element and remove them // IMPORTANT: This cannot be done with a forEach loop or a normal for loop since as you remove children it will modify the list you are looping over which will not work // I recommend using a while loop to accomplish this task // This is the trickiest part of this exercise so if you get stuck and are unable to progress you can also set the innerHTML property of the error-list to an empty string and that will also clear the children. I recommend trying to accomplish this with a while loop, though, for practice. // Also, make sure you remove the show class to the errors container // easy way: // errorsList.innerHTML="" while(errorsList.children[0]!=null){ errorsList.removeChild(errorsList.children[0]) } errorsContainer.classList.remove("show") } // TODO: Define this function function showErrors(errorMessages) { // Add each error to the error-list element // Make sure to use an li as the element for each error // Also, make sure you add the show class to the errors container errorMessages.forEach(errorMessage=>{ const li=document.createElement('li') li.innerText=errorMessage errorsList.appendChild(li) }) errorsContainer.classList.add("show") }
-
Callback async
// Callback async // `setTimeout` async setTimeout(()=>{ console.log("Inside"); },1000) console.log("Outside"); // `addEventListener` async const btn =document.querySelector("button") btn.addEventListener("click",()=>{ console.log("Clicked"); })
-
Creating function to call the callback async
// creating function to call the callback async function addClickEventListener(element,callback){ element.addEventListener("click",callback) } addClickEventListener(btn,()=>{ console.log("clicked"); })
-
Callback hell (can be prevented using promise)
// callback hell (can be prevented using promise) setTimeout(()=>{ console.log("1st callback"); setTimeout(()=>{ console.log("2nd callback"); setTimeout(()=>{ console.log("3rd callback"); },1000) },1000) },1000)
-
Promise : resolve/reject --> then/catch
// Promise : resolve/reject --> then/catch const promise = new Promise((resolve, reject) => { const sum = 1 + 1; if (sum === 2) { resolve(sum); } else { reject("Error"); } }); promise .then((message) => { console.log(message); }) .catch((message) => { console.error(message); });
-
Normal to Promise
setTimeout// Normal setTimeout setTimeout(() => { console.log("Normal setTimeout"); }, 1000); // Promise setTimeout function setTimeoutPromise(duration) { return new Promise((resolve, reject) => { setTimeout(resolve, duration); }); } setTimeoutPromise(2000).then(() => { console.log("Promise setTimeout"); });
-
Callback hell solution
// Callback hell setTimeout(() => { console.log("1st callback"); setTimeout(() => { console.log("2nd callback"); setTimeout(() => { console.log("3rd callback"); }, 1000); }, 1000); }, 1000); // Prevent Callback hell with promise function setTimeoutPromise(duration) { return new Promise((resolve, reject) => { setTimeout(resolve, duration); }); } setTimeoutPromise(1000).then(() => { console.log("1st callback promise"); return setTimeoutPromise(1000).then(() => { console.log("2nd callback promise"); return setTimeoutPromise(1000).then(() => { console.log("3rd callback promise"); }); }); });
-
Create a promise version of addEventListener
// Create a promise version of addEventListener // Normal addEventListener const btn = document.querySelector('button') // btn.addEventListener("click",()=>{ // console.log("Clicked"); // }) // Promise addEventListener function addEventListenerPromise(element,method){ return new Promise((resolve,reject)=>{ element.addEventListener(method,resolve) }) } addEventListenerPromise(btn,"click").then(()=>{ console.log("Clicked using promise"); })
-
Simple Promises
// Simple Promises Promise.resolve('value').then(message=>{ console.log(message); }) Promise.reject('error message').catch(message=>{ console.error(message); })
-
Multiple promises (every promise need to be succeed or resolve/then won't execute)
// Multiple promises (every promise need to be succeed or resolve/then won't execute) Promise.all([ Promise.resolve("1"), Promise.resolve("2"), Promise.resolve("3"), ]).then(messages=>{ console.log(messages); })
-
Any promise that succeed
// Any promise that succeed Promise.any([ Promise.reject("1"), Promise.resolve("2"), Promise.resolve("3"), ]).then(messages=>{ console.log(messages); }).catch(error=>{ console.error(error); })
-
First promise that succeed/fail
// First promise that succeed/fail Promise.race([ Promise.resolve("1"), Promise.reject("2"), Promise.resolve("3"), ]).then(messages=>{ console.log(messages); }).catch(error=>{ console.error(error); })
-
Promise fulfilled or rejected all printed out
// Promise fulfilled or rejected all printed out Promise.allSettled([ Promise.resolve("1"), Promise.reject("2"), Promise.resolve("3"), ]).then(messages=>{ console.log(messages); }).catch(error=>{ console.error(error); })
-
Promise finally
// Promise finally const promise2 = Promise.reject("here") promise2.then(message=>{ console.log(message); }).catch(error=>{ console.error(error); }).finally(()=>{ console.log("finally"); })
-
Promise
// promise function setTimeoutPromise(delay) { return new Promise((resolve, reject) => { setTimeout(() => { // resolve(`Waited ${delay} seconds`) reject("Error message"); }, delay); }); } setTimeoutPromise(1000) .then(() => { console.log("1st setTimeout Promise"); return setTimeoutPromise(1000); }) .then(() => { console.log("2nd setTimeout Promise"); return setTimeoutPromise(1000); }) .then(() => { console.log("3rd setTimeout Promise"); }) .catch(e=>{ console.error(e); })
-
Async Await
// Async Await function setTimeoutPromise(delay) { return new Promise((resolve, reject) => { setTimeout(() => { // resolve(`Waited ${delay} seconds`) reject("Error message"); }, delay); }); } async function dothing() { try { const message = await setTimeoutPromise(1000); console.log(message); } catch (error) { console.error(error); } } dothing();
-
Example task
// Example task // Call getValueWithDelay twice and print out the returned value // Then call getValueWithDelayError and make sure that the error is properly caught. function getValueWithDelay(value, delay) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(value); }, delay); }); } function getValueWithDelayError(value, delay) { return new Promise((resolve, reject) => { setTimeout(() => { reject("Error message"); }, delay); }); } async function dostuff() { try { const value1 = await getValueWithDelay("hello", 1000); console.log(value1); const value2 = await getValueWithDelayError("hello", 1000); console.log(value2); } catch (error) { console.error(error); } finally { console.log("Finally"); } } dostuff();
-
Run promises parallelly
// Run promises parallelly getValueWithDelay("Tansen", 1000).then((message) => console.log(message)); getValueWithDelay("Boch", 1000).then((message) => console.log(message)); getValueWithDelay("Shakil", 1000).then((message) => console.log(message));
-
Fetching json data using promise and async
// Normal promise fetch const URL="https://jsonplaceholder.typicode.com/users" fetch(URL).then(response=>{ // console.log(response); return response.json() }).then(data=>{ data.map(name=>{ console.log(name.username); }) }) // Async await fetch async function dothing(){ try{ const response = await fetch(URL) console.log(response.ok); if(response.ok){ const data=await response.json() data.forEach(name=>{ console.log(name.username); }) }else{ console.log("Failure"); } }catch(e){ console.error(e); } } dothing()
-
Fetch post
// fetch post const URL2="https://jsonplaceholder.typicode.com/posts" async function dothing2(){ const response = await fetch(URL,{ method:"POST", headers:{ "Content-Type":"application/json" }, body:JSON.stringify({ title:"New post" }) }) const post=await response.json() console.log(post); } dothing2()
-
Exercise get all comment in post id 1
// Exercise get all comment in post id 1 const URL3="https://jsonplaceholder.typicode.com/comments?postId=1" // with normal promise fetch fetch(URL3).then(response=>{ return response.json() }).then(data=>{ console.log(data); }) // with async fetch async function getComments() { const response=await fetch(URL3) const comments = await response.json() console.log(comments); } getComments()
-
Main thread vs task queue
- Main thread run all the code
- Task queue execute one by one
- Task queue wait for other to run first in main thread then run
// Main thread vs task queue function test(){ console.log("Hi 1"); console.log("Hi 2"); setTimeout(()=>{ console.log("Hi 3"); },10) new Promise((resolve,reject)=>{ resolve("Hi promise") }).then(message=>{ console.log(message); }) setTimeout(()=>{ console.log("Hi 4"); },0) console.log("Hi 5"); } test()
- In the task queue promise run first then callback run
-
Simple click event listener (Button->Body->Document)
// Simple click event listener (Button->Body->Document) // Change the order with capture (Body->Button->Document) // Stop bubble with `stopPropagation()` const buttons = document.querySelectorAll('button') document.addEventListener("click",()=>{ console.log("Clicked Document"); }) document.body.addEventListener("click",e=>{ e.stopPropagation() console.log("Clicked Body"); },{capture:true}) buttons.forEach(button=>{ button.addEventListener("click",()=>{ console.log("Clicked Button"); }) })
-
Creating new button and adding Event Listener with
matches// Creating new button and adding Event Listener with `matches` const newButton=document.createElement("button") newButton.innerText="Button 5" document.body.append(newButton) document.addEventListener("click",e=>{ if(e.target.matches("button")){ console.log("Clicked button 5"); } })
| Storage Type | Capacity | Expiration | Scope | Ease of Use |
|---|---|---|---|---|
| Local Storage | 10MB | Never Expires | Client | Easy |
| Cookies | 4KB | Manual Expiration | Client/Server | Hard |
| Session Storage | 5MB | Expire on tab close | Client | Easy |
-
Local storage
// Local storage localStorage.setItem('Name','Tansen')
-
Session storage
// Session storage sessionStorage.setItem('Age','24')
-
Update value of Local/Session storage
// update value localStorage.setItem('Name','Alahi') sessionStorage.setItem('Age','24') // Show in console console.log(localStorage.getItem("Name"));
-
Cookies
// Cookies const date=new Date(9999,0,1).toUTCString() console.log(date); document.cookie=`name=Tansen; expires=${date}` console.log(document.cookie);