JavaScript Advance

Topics
Dom, Dom Manipulation, Setting CSS Styles using JavaScript,,
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
})
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

OOP in JavaScript: Prototypes

“CLASSICAL OOP”: “OOP IN JS”: PROTOTYPE

CLASSES
EXAMPLE

Contains
Class Prototype methods

Prototypal Inheritance/ MDN WEB DOCS

Delegation

Can access
Instance Object methods

👉 Object(instances) are 👉 Objects are linked to prototype object.

instantiated from a class, which
functions like a blueprint;
👉 Behavior(methods) is copied
from class to all instances.
👉 Prototypal Inheritance: The prototype
contains methods(behavior) that are accessible
to all the objects linked to that prototype.
👉 Behavior is delegated to the linked prototype
object.
Array.prototype is the prototype
of all array objects we create in
JavaScript.
Therefore, all arrays have access
to the map method.
Ways of Implementing Prototypal Inheritance in JS

1. Constructor Function Demo

👉 Technique to create objects from a

function.
👉 This is how built-in objects like Array,
Maps, or Sets are actually implemented.
How Prototype Chain works

.prototype
Constructor function Prototype 🆕 The new operator
[Person()] [Person.prototype]
calcAge: function 👉 An empty object is created.
.constructor

.__proto__ 👉 this keyword in constructor

function call is set to the new
object.
Object 👉 The new object is linked
[saquib] (__proto__ property) to the
constructor function’s
name: ’Saquib’ prototype property.

birthYear: 1997 👉 The new object is returned

from the constructor function
Can’t find calcAge call.
here! __proto__:
Person.prototype
obj obj obj
Prototype Chaining

Prototype
Object
[saquib] [Object.prototype]
[Object()]
__proto__: null

.__proto__

Prototype
Object [Person.prototype]
[Person()] __proto__:
Object.prototype

.__proto__

Object
[saquib]
__proto__:
Person.prototype
ES6 Classes

Basic ES6 Class

👉 Modern alternative to construction

function syntax.
👉 “Syntactic Sugar”: behind the scenes, ES6
classes works exactly like constructor
functions.
👉 ES6 classes do not behave like “classical OOP”.
ES6 Classes with Inheritance

Inheritance Example

Person Class

extends

Student Class
Link to resources

👉 Code Repository: https://github.com/ksaquib/Internet-Programming

👉 Asynchronous JavaScript: https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=907s

👉 Callback, Promises and Async Await: https://www.youtube.com/watch?v=_8gHHBlbziw