JavaScript Intermediate Part- 2

8 minute read

1 API JSON, SERVER, DATA LOAD, DYNAMIC WEBSITE, HTTP

1.1 WHAT IS AN API, THE PURPOSE OF API, GET, POST

Resources - 1
Resources - 2

1.2 JSON, JSON STRUCTURE, PARSE, STRINGIFY, JSON PROPERTIES

<body>
  <h1>JSON</h1>
  <h2>JavaScript Object Notation</h2>
  <script>
    const user = {
      // JS object
      id: 245,
      name: 'Masud',
      age: 26,
      sibling: {
        name: 'Riya',
        favoriteFood: 'pizza',
        age: 22,
      },
      friendAge: [25, 23, 26],
      friends: ['Kamal', 'Jamal', 'Riaj'],
    };

    // when sending
    const userJSON = JSON.stringify(user); // convert JS object to JSON
    console.log(userJSON); // {"id":245,"name":"Masud"} // JSON

    // when receiving
    const userFromJSON = JSON.parse(userJSON); // JSON to JS Object
    console.log(userFromJSON); // {id: 245, name: "Masud"}
  </script>
</body>

1.3 LOAD DATA, JSON PLACEHOLDER, GET DATA, DISPLAY DATA ON UI

<body>
  <h1>JSON</h1>
  <h2>JavaScript Object Notation</h2>
  <ul id="user-container"></ul>
  <script>
    // https://jsonplaceholder.typicode.com/
    // fetch('https://jsonplaceholder.typicode.com/todos/1')
    //     .then(response => response.json())
    //     .then(json => console.log(json))
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => displayUser(json));

    function displayUser(users) {
      // console.log("users", users);
      const userNames = users.map((user) => user.username);
      // console.log(userNames);

      const ul = document.getElementById('user-container');
      for (let i = 0; i < userNames.length; i++) {
        const user = userNames[i];
        const li = document.createElement('li');
        li.innerText = user;
        ul.appendChild(li);
      }
    }
  </script>
</body>

1.4 HTTP REQUEST, STATUS CODE, NETWORK TAB, BAD API

<body>
  <h1>JSON</h1>
  <h2>JavaScript Object Notation</h2>
  <ul id="user-container"></ul>
  <script>
    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

    fetch('https://jsonplaceholder.typicode.com/people')
      .then((response) => response.json())
      .then((json) => displayUser(json))
      .catch((error) => console.log(error));

    function displayUser(users) {
      // console.log("users", users);
      const userNames = users.map((user) => user.username);
      // console.log(userNames);

      const ul = document.getElementById('user-container');
      for (let i = 0; i < userNames.length; i++) {
        const user = userNames[i];
        const li = document.createElement('li');
        li.innerText = user;
        ul.appendChild(li);
      }
    }
  </script>
</body>

1.5 SEND DATA TO THE SERVER, HTTP POST METHOD, GET VS POST AND SEND DATA TO SERVER, HTTP POST, JSON STRINGIFY

<body>
  <h1>JSON</h1>
  <h2>JavaScript Object Notation</h2>
  <ul id="user-container"></ul>
  <input type="text" name="" id="title" placeholder="title" />
  <br />
  <input
    type="text"
    name=""
    id="body-content"
    placeholder="post main section"
  />
  <br />
  <button id="submit">Submit</button>
  <script>
    //    const postInfo = {
    //         title: 'fooooooo',
    //         body: 'barrrrrrr',
    //         userId: 1
    //     }

    document.getElementById('submit').addEventListener('click', function () {
      const title = document.getElementById('title').value;
      const bodyContent = document.getElementById('body-content').value;
      // console.log(title, bodyContent)
      const post = {
        title: title,
        body: bodyContent,
      };
      nowPostToServer(post);
    });

    function nowPostToServer(postInfo) {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify(postInfo),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      })
        .then((response) => response.json())
        .then((data) => console.log(data))
        .catch((error) => alert('Please try again later'));
    }

    function displayUser(users) {
      // console.log("users", users);
      const userNames = users.map((user) => user.username);
      // console.log(userNames);

      const ul = document.getElementById('user-container');
      for (let i = 0; i < userNames.length; i++) {
        const user = userNames[i];
        const li = document.createElement('li');
        li.innerText = user;
        ul.appendChild(li);
      }
    }
  </script>
</body>

Additional Resources - 1
Additional Resources - 2

1.6 JQUERY AJAX, JQUERY GET, JQUERY POST REACT INSTALL ISSUE

Resources

2 OBJECT MASTERING, INTERVIEW QUESTION

2.1 OBJECT METHOD PROPERTY REVIEW

const person = {
  firstName: 'Rahim',
  lastName: 'Udding',
  salary: 15000,
  getFullName: function () {
    // this can be used to access any property of an object
    console.log(this.firstName, this.lastName);
  },
  chargeBill: function (amount) {
    this.salary = this.salary - amount;
    return this.salary;
  },
};

console.log(person);
// if access from outside object, if access inside object use this
console.log(person.firstName); // Rahim // access object property

// call function inside a object
person.chargeBill(150);
console.log(person.salary);

2.2 OBJECT USE BIND TO BORROW METHOD FROM ANOTHER OBJECT

// BINDING

// object - 1
const normalPerson = {
  firstName: 'Albert',
  lastName: 'Einstein',
  salary: 15000,
  getFullName: function () {
    // this can be used to access any property of an object
    console.log(this.firstName, this.lastName);
  },
  chargeBill: function (amount) {
    console.log(this);
    this.salary = this.salary - amount;
    return this.salary;
  },
};

// object - 2
const heroPerson = {
  firstName: 'Blaise',
  lastName: 'Pascal',
  salary: 25000,
};

// object - 3
const friendlyPerson = {
  firstName: 'Enrico',
  lastName: 'Fermi',
  salary: 35000,
};

// normalPerson.chargeBill();

// bind normalPerson with heroPerson
const heroBillCharge = normalPerson.chargeBill.bind(heroPerson);

heroBillCharge(2000);
heroBillCharge(3000);
console.log(heroPerson.salary); // 20000

console.log(normalPerson.salary); // 15000

// bind normalPerson with friendlyPerson
const friendlyChargeBill = normalPerson.chargeBill.bind(friendlyPerson);
friendlyChargeBill(1500);
console.log(friendlyPerson.salary);

Additional Resources - 1
Additional Resources - 2

2.3 DIFFERENCE BETWEEN BIND, CALL AND APPLY

// CALL

// object - 1
const manager = {
  firstName: 'Albert',
  lastName: 'Einstein',
  salary: 80000,
  getFullName: function () {
    // this can be used to access any property of an object
    console.log(this.firstName, this.lastName);
  },
  chargeBill: function (amount, tips, tax) {
    console.log(this);
    this.salary = this.salary - amount - tips - tax;
    return this.salary;
  },
};

// object - 2
const assistantManager = {
  firstName: 'Blaise',
  lastName: 'Pascal',
  salary: 70000,
};

// object - 3
const employee = {
  firstName: 'Enrico',
  lastName: 'Fermi',
  salary: 35000,
};

manager.chargeBill.call(assistantManager, 900, 100, 10);
manager.chargeBill.call(assistantManager, 3000, 300, 30);
console.log(assistantManager.salary); // 65660

manager.chargeBill.call(employee, 5000, 500, 50);
console.log(employee.salary); // 29450

// APPLY - in apply array needs to be pass as function arguments
manager.chargeBill.apply(assistantManager, [900, 100, 10]);
manager.chargeBill.apply(assistantManager, [3000, 300, 30]);
console.log(assistantManager.salary); // 65660

manager.chargeBill.apply(employee, [5000, 500, 50]);
console.log(employee.salary); // 29450

Additional Resources - 1
Additional Resources - 2
Additional Resources - 3
Additional Resources - 4

2.4 WINDOW, GLOBAL VARIABLE, GLOBAL SCOPE

<body>
  <script>
    // Browser ->devloper tool -> console -> type window
    // document === window.document // true
    // console === window.console // true
    // document.getElementById

    var name = 'Alex';

    function add(num1, num2) {
      var result = num1 + num2;
      // result = num1 + num2; // without var the variable will be implicitly global
      // result = num1 + num2;
      // console.log('result inside', result); // local variable
      console.log('name inside', name);

      function double(num) {
        return num * 2;
      }
      var total = double(result);
      return total;
    }

    // console.log('result outside', result); // throw error because result is not global variable
    console.log('name outside', name);
    // console.log(result); // if result set as implicitly global then it can't be access before calling the function
    var sum = add(13, 21);
    console.log(sum);
    console.log(result);
    // console.log(result);

    // browser console -> name -> will display because it's global
    // browser console -> double -> throw error because it's local
    // browser console -> add -> will display because it's global
  </script>
</body>

2.5 NEW KEYWORD, CLASS AND OBJECT DIFFERENCE

class Person {
  constructor(firstName, lastName, salary) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.salary = salary;
  }
}

// new keyword is used to create object from class
const heroPerson = new Person('Blaise', 'Pascal', 25000);
console.log(heroPerson);
// Person { firstName: 'Blaise', lastName: 'Pascal', salary: 25000 }

const friendlyPerson = new Person('Enrico', 'Fermi', 35000);
console.log(friendlyPerson);
// Person { firstName: 'Enrico', lastName: 'Fermi', salary: 35000 }

// before ES6 function is used to create class, function name start with capital letter indicating it used for class
function Person2(firstName, lastName, salary) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.salary = salary;
}

const oldPerson = new Person2('Grand', 'Papa', 12000);
console.log(oldPerson);
// Person2 { firstName: 'Grand', lastName: 'Papa', salary: 12000 }

Additional Resources

2.6 HOW TO UNDERSTAND THE THIS KEYWORD

<body>
  <h1>This is not confused anymore</h1>
  <p onclick="this.innerText = 'Thank you for clicking me'">
    Click for surprise
  </p>

  <script>
    const myObj = {
      name: 'Niels Bohr',
      getFullName: function () {
        console.log(this);
        return 'Mr. ' + this.name;
      },
    };

    // myObj.getFullName();

    const anotherObj = {
      name: 'Sarah Boysen',
    };

    anotherObj.getFullName = myObj.getFullName;
    console.log(anotherObj.getFullName);
    myObj.getFullName(); // left of .function() is the object this will refer
    anotherObj.getFullName(); // left of .function() is the object this will refer

    function add(a, b) {
      console.log(this); // this will return window object
      return a + b;
    }

    add(12, 13); // nothing before function(), means this will refer window

    anotherObj.sum = add;
    anotherObj.sum();

    setTimeout(function () {
      console.log(this);
    }, 1000);
  </script>
</body>

Additional Resources

2.7 ASYNC AWAIT HOW TO USE IT FOR ASYNC CALL

<body>
  <ul id="myList"></ul>

  <script>
    // 26.8 ASYNC AWAIT HOW TO USE IT FOR ASYNC CALL
    /*  async function greet(name) {
            return "Hello " + name;
        }

        const greeting = greet("Mofiz");
        console.log(greeting); // will return promise
        // access using then
        greeting.then(res => console.log(res));

        // arrow function with async
        // const abc = async () =>
        */

    async function loadData() {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/users'
      );
      const data = await response.json();
      // console.log(data);
      displayData(data);
      return data;
    }

    loadData();

    // function loadData() {
    //     fetch('https://jsonplaceholder.typicode.com/users')
    //         .then(response => response.json())
    //         .then(data => {
    //             displayData(data);
    //         })
    // }
    // loadData();

    function displayData(data) {
      // console.log(data);
      const parentNode = document.getElementById('myList');
      for (let i = 0; i < data.length; i++) {
        const user = data[i];
        const item = document.createElement('li');

        item.innerText = user.name;
        parentNode.append(item);
      }
    }
  </script>
</body>

Additional Resources - 1
Additional Resources - 2
Additional Resources - 3
Additional Resources - 4

2.8 ASYNCHRONOUS JAVASCRIPT SETTIMEOUT, SETINTERVAL

function doSomething() {
  console.log(3333);
}

console.log(2222);
// doSomething();
// SetTimeOut run only once
setTimeout(doSomething, 3000);

setTimeout(function () {
  console.log('Lazy and waiting');
}, 5000);

// arrow function
setTimeout(() => {
  console.log('Lazy and waiting....');
}, 5000);

console.log(4444);

// setInterval run repeatedly
setInterval(() => {
  console.log('Set interval');
}, 1000);

2.9 HOW JAVASCRIPT WORKS EVENT LOOP STACK AND QUEUE

Resources -1
Resources -2

2.10 JAVASCRIPT DATETIME TIMEZONE AND OTHERS

// browser console
let start = new Date();
let sum = 0;
for (let i = 0; i < 100000000; i++) {
  sum++;
}
let end = new Date();
console.log('Time elapsed', end - start, sum);

Additional Resources -1
Additional Resources -2

Leave a Comment