How JavaScript Works:

Temporal Dead Zone: a specific period in the execution of JavaScript code where variables declared with let and const exist but cannot be accessed or assigned any value. During this phase, accessing or using the variable will result in a Reference Error.

Async vs defer:

async and defer both load JavaScript asynchronously without render blocking, but async executes as soon as possible while defer runs in sequence toward the end of the loading process, just before the DOM Content Loaded event.

<!-- Using defer in javascript is always useful -->
<script src="./script.js" defer></script>
<script src="./script.js" async></script>

DOM Manipulation

DOM in JavaScript:

In JavaScript, the DOM is used to represent the structure of a web page. It provides a way to access and modify the elements of a web page, such as text, images, and buttons.

The DOM is made up of a number of different objects, each of which represents a different part of a web page. The most important objects in the DOM are the document object, the element object, and the text node object.

The document object represents the entire web page. The element object represents a single element on a web page, such as a paragraph, a button, or an image. The text node object represents a piece of text on a web page. The DOM is a complex and powerful tool, and it is used by JavaScript developers to create dynamic and interactive web pages.

Accessing the element:

Event Handling in DOM:

Event Bubbling/ propagation, capturing and delegation

Event Bubbling : Event bubbling is a process in JavaScript that allows events to be propagated up the DOM tree from the element that was targeted to the parent elements. This is useful for situations where you want to be able to handle an event on multiple elements that are nested within each other.

For example, you might have a button that is inside of a div that is inside of a body element. If you click on the button, you would want to be able to handle the click event on all three elements. Event bubbling allows you to do this by propagating the event up the DOM tree from the button element to the div element and then to the body element.

Event Capturing : Event capturing is one of the two ways to implement event propagation in the DOM. In event capturing, an event propagates from the outermost element to the target element. It is the opposite of event bubbling, where events propagate outwards from the target to the outer elements.

When you click on an element, the click event is first fired on the element itself. Then, it is propagated to the parent element, and so on, until it reaches the document element. If you have any event listeners attached to any of these elements, they will be called in the order that the elements were clicked.

Event Delegation : Event delegation is a technique in JavaScript where we delegate the responsibility of handling an event to a parent element. By doing so, we avoid attaching multiple event listeners to individual elements, especially when dealing with a large number of similar elements, such as a list or a table.

github link: https://github.com/vitthal-korvan/JavaScript-Mastery