Pink API

Question 1

What “DOMContentLoaded” used in combination with?

Answer 1

document and addEventListener

Question 2

What is the use of “DOMContentLoaded” event?

Answer 2

Ensure that your code executes only after the HTML document has been completely loaded and parsed.
It allows you to safely manipulate the DOM elements.

Question 3

Give me a practical use (lines of code) for DOMContentLoaded.

Answer 3

document.addEventListener(‘DOMContentLoaded’, function() {
console.log(‘DOM fully loaded and parsed’);
});

Question 4

What’s the difference between DOMContentLoaded and “load” event?

Answer 4

The load event waits for all assets like images and stylesheets to load, DOMContentLoaded only waits for the HTML and DOM structure to be ready.

Question 5

What is for in loop ?

Answer 5

Only used for an object (with keys and values); loop through keys of an object

for (let key in person) {
console.log(key + “: “ + person[key]);
}

Question 6

What is event delegation?

Answer 6

Event delegation is a technique in JavaScript where we delegate the responsibility of handling an event to a parent element (we can avoid multiple event listeners for individual elements)

Question 7

What are key concepts of event delegation?

Answer 7

1. Event Bubbling:

When an event is triggered on an element, it starts from that element and “bubbles” up through its ancestors in the DOM tree until it reaches the root (usually the document object).

2. Attaching a Single Event Listener:

Instead of adding event listeners to multiple child elements, you attach a single event listener to a parent element.

3. Event Targeting:

When an event occurs, you can identify the actual element that triggered the event using the EVENT.TARGET property.

Question 8

Explain this code

container.addEventListener(“mouseover”, (event) => {…}

Answer 8

Anytime when adding an event listener, “mouseover” is the EVENT TYPE (that i am listening for),
(event) is the parameter for the arrow function; this parameter represents the event object that is automatically passed to the function when the event occurs. You can name this parameter anything you want

(event) is not only a parameter for a callback function, but also an object created by browser when event (“mouseover”) occurred.

Event Object (event):

When the mouseover event occurs (i.e., when the mouse enters an element inside container), the browser creates an event object.
This event object is automatically passed as an argument to the callback function (event) => { … }.
You use event inside the callback function to access information about the event, such as event.target (the element that triggered the event), event.clientX/event.clientY (mouse coordinates), etc.
Handling Multiple Events:

You can attach the same or different callback functions to handle different events (like “click”, “keydown”, etc.) for the same element.
Each event handler function will receive an event object specific to the event type it is handling.
Therefore, (event) is necessary after “mouseover” to denote that the following arrow function (event) => { … } expects to receive an event object as its parameter. This allows you to access properties and methods of the event object inside your function, enabling you to respond to and manipulate elements based on the event that occurred (in this case, changing the background color based on the class of the element h

Question 9

Difference between html structure and DOM

Answer 9

HTML structure: static markup; made of elements

DOM: live, interactive version of html created by browser; object-based representation of the HTML structure; Document OBJECT model, made of elements (which are objects with properties and methods) ; Each element in DOM is an OBJECT

Question 10

Are elements same as node?

Answer 10

No; elements are a TYPE of nodes ;

Element Node: Represents an HTML element
Text Node: Represents the text inside an element.
Comment Node: Represents comments in the HTML.
Document Node: Represents the entire document.

Question 11

Explain HTML box model

Answer 11

Each element in HTML is a box

Content: The actual content of the element.
Padding: The space between the content and the border.
Border: The boundary surrounding the padding and content.
Margin: The space outside the border.

Question 13

Explain variables.

Answer 13

A variable is a concept in JavaScript (and other programming languages) used to store data. Variables do not exist in HTML.

Question 14

let paragraph = document.createElement(“p”);
paragraph.textContent = “Hello, World!”;

Why do i need to create a variable and store the html element?

Answer 14

I dynamically created a new HTML element in JS (which is paragraph) but it is in memory until you add it to the DOM.

1. Create in memory
2. Store in a variable
3. Append to DOM (appendChild or insertBefore)

Question 15

Is a variable I created in js considered an object?

Answer 15

In JavaScript, not every variable is an object by default. It DEPENDS on what it stores; if primitive data types, NOT an object; if reference data types, YES It is an OBJECT