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