JavaScript Advance

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

JavaScript Advance

Uploaded by

Copyright:

Available Formats

JavaScript Advance

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Advance

Uploaded by

Copyright:

Available Formats

JavaScript Advance

🏷 setInterval() and setTimeout() are methods of “window”.

🏷 document object does have various object, methods or properties like

DOCUMENT OBJECT MODEL: STRUCTURED

Change text, HTML

DOM Methods and

Timers Can Interact

👉 Most code is synchronous;

👎 Long-running operations block code execution.

👉 Asynchronous code is executed after a task that runs in the “background”

Asynchronous JavaScript And XML: Allows us to communicate

Asking for some data

Callback Function is a function as

E.g.: fname(function(param1, param2, ...., paramN){

For (variable of iterable){

So we use other methods such as

It becomes unmanageable when we have

So we use other methods such as

The Promise object represents the

A Promise is in one of these states:

👉 pending: Initial state, neither fulfilled nor rejected.

Promisifying the previous

🏷 Iterators were introduced in ES6.

🏷 It is a mechanism to iterate or traverse through data

🏷 It means if you want to put a for...of loop on an array, then

You want to make this object literal an

We can do this in ES6 by using Symbol.iterator

Array Example Object Example

How do you create an iterator?

🏷 “Generators” can help you to pause and resume the code.

Example Refactored Iterator

How do you create an iterator?

Stop a generator function

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.