JavaScript Intermediate Part- 2
Table of contents
-
1 API JSON, SERVER, DATA LOAD, DYNAMIC WEBSITE, HTTP
- 1.1 WHAT IS AN API, THE PURPOSE OF API, GET, POST
- 1.2 JSON, JSON STRUCTURE, PARSE, STRINGIFY, JSON PROPERTIES
- 1.3 LOAD DATA, JSON PLACEHOLDER, GET DATA, DISPLAY DATA ON UI
- 1.4 HTTP REQUEST, STATUS CODE, NETWORK TAB, BAD API
- 1.5 SEND DATA TO THE SERVER, HTTP POST METHOD, GET VS POST AND SEND DATA TO SERVER, HTTP POST, JSON STRINGIFY
- 1.6 JQUERY AJAX, JQUERY GET, JQUERY POST REACT INSTALL ISSUE
-
2 OBJECT MASTERING, INTERVIEW QUESTION
- 2.1 OBJECT METHOD PROPERTY REVIEW
- 2.2 OBJECT USE BIND TO BORROW METHOD FROM ANOTHER OBJECT
- 2.3 DIFFERENCE BETWEEN BIND, CALL AND APPLY
- 2.4 WINDOW, GLOBAL VARIABLE, GLOBAL SCOPE
- 2.5 NEW KEYWORD, CLASS AND OBJECT DIFFERENCE
- 2.6 HOW TO UNDERSTAND THE THIS KEYWORD
- 2.7 ASYNC AWAIT HOW TO USE IT FOR ASYNC CALL
- 2.8 ASYNCHRONOUS JAVASCRIPT SETTIMEOUT, SETINTERVAL
- 2.9 HOW JAVASCRIPT WORKS EVENT LOOP STACK AND QUEUE
- 2.10 JAVASCRIPT DATETIME TIMEZONE AND OTHERS
This articles covers these topics api, json, json parse, json stringify, load data, get data, display data on UI, http request status code, network tab, send data to server, object method, bind, call, apply, window, global scope, new keyword, class, this keyword, async, await, setTimeout, setInterval, event loop and datetime
1 API JSON, SERVER, DATA LOAD, DYNAMIC WEBSITE, HTTP
1.1 WHAT IS AN API, THE PURPOSE OF API, GET, POST
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
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) // 29450Additional 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 }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>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
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)