JavaScript Advance
Topics
Dom, Dom Manipulation, Setting CSS Styles using JavaScript,
Classes and Inheritance, Iterators and Generators, Promise, Client-
Server Communication, Fetch, Asynchronous JavaScript
Difference b/w DOM object and WINDOW object
🏷 setInterval() and setTimeout() are methods of “window”.
🏷 document is an object in “window”.
🏷 document object does have various object, methods or properties like
document.querySelector().
🏷 window Object has properties like innerHeight and innerWidth.
What is DOM?
DOCUMENT OBJECT MODEL: STRUCTURED
REPRESENTATION OF HTML DOCUMENTS.
ALLOWS JAVASCRIPT TO ACCESS HTML
ELEMENTS AND STYLES TO MANIPULATE
THEM.
Change text, HTML
attributes, and even
CSS styles.
THE DOM TREE STRUCTURE
Special object that is the
entry point to the DOM.
Example:
document.querySelector().
MORE ABOUT DOM
DOM Methods and
Properties for DOM
Manipulation Not a part of
For example
document.querySelector()
WEB APIs are basically libraries
that are also written in JS and are
automatically available for you to
use.
Timers Can Interact
with
Fetch
ASYNCHRONOUS JAVASCRIPT
Synchronous JavaScript
THREAD OF
EXECUTIO
N
Blocking
👉 Most code is synchronous;
Part of execution context that
👉 Synchronous code is executed line by line; actually executes the code in
👉 Each line of code waits for previous line to finish; computer’s CPU
👎 Long-running operations block code execution.
ASYNCHRONOUS CODE
THREAD OF BACKGROUND
EXECUTIO
Callback will run
N
after timer Timer
running
👉 Asynchronous code is executed after a task that runs in the “background”
finishes.
👍 Asynchronous code is non blocking.
👉 Execution doesn’t wait for an asynchronous task to finish its work.
What are AJAX calls?
Asynchronous JavaScript And XML: Allows us to communicate
with remote web servers in an asynchronous way. With AJAX
calls, we can request data from web servers dynamically.
Asking for some data
REQUEST WEB
CLIENT
SERVER
💻
(e.g. Browser)
🌐
RESPONSE
Sending Data Back
Callback Function
Example of Callback
Callback Function is a function as
a parameter in another function.
E.g.: fname(function(param1, param2, ...., paramN){
//statements
})
For-of loop and for-each () method
For (variable of iterable){
}
Variablename.forEach(function(value,index,array)
So we use other methods such as
promises and async/await
Callback Hell or Pyramid of Doom
It becomes unmanageable when we have
multiple calls depending on the result
So we use other methods such as
promises and async/await
Promises
A Simple Promise
The Promise object represents the
eventual completion (or failure) of
an asynchronous operation and its
resulting value
A Promise is in one of these states:
👉 pending: Initial state, neither fulfilled nor rejected.
👉 fulfilled: meaning that the operation was successful
👉 rejected: meaning that operation failed
Promisification
Promisifying the previous
callback code
Iterators & Generators
🏷 Iterators were introduced in ES6.
🏷 It is a mechanism to iterate or traverse through data
structures.
🏷 As you know Array is already iterable.
🏷 It means if you want to put a for...of loop on an array, then
you can easily do that.
💻
Iterators & Generators
let obj ={
value1:number,
You want to use value2:number
for...of loop on }
this object literal
You want to make this object literal an
iterable object.
We can do this in ES6 by using Symbol.iterator
Iterators Example
Array Example Object Example
How do you create an iterator?
�
👉 The “Symbol.iterator” method must be �
implemented which should return an iterator
object & also should have a next() method which
returns the object.
Generators
🏷 “Generators” can help you to pause and resume the code.
🏷 Normally when you write function, it returns a single value.
🏷 You can think of generators as a kind of function which can return multiple
values in phases.
🏷 The function* is the keyword used to define a generator function.
🏷 yield is an operator which pauses the generator.
🏷 yield also helps us to receive input & send output.
Generators Example
Example Refactored Iterator
code
How do you create an iterator?
The “Symbol.iterator” method must be
implemented which should return an iterator
object & also should have a next() method which
returns the object.
Generators Example
Stop a generator function
