Question

Question 3: Explain the purpose of the DOM (Document Object Model) in JavaScript. Provide an example of how JavaScript can be used to modify the DOM to change the content of an HTML page. Include the relevant JavaScript code.

Answer 1

The DOM is a tree-like representation of the HTML document. It allows JavaScript to access and manipulate the structure, content, and style of a webpage. Essentially, it provides an interface for interacting with the HTML elements.

Here's an example of how JavaScript can be used to modify the DOM to change the content of an HTML page:

HTML:


<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="myHeading">Original Heading</h1>
</body>
</html>

JavaScript:


<script>
// Get a reference to the heading element using its ID
var heading = document.getElementById("myHeading");
// Change the text content of the heading
heading.textContent = "New Heading!";
// Change the heading's style (e.g., color)
heading.style.color = "blue";
</script>

Explanation:

document.getElementById("myHeading"): This line retrieves a reference to the HTML element with the ID "myHeading".

heading.textContent = "New Heading!";: This line sets the text content of the heading element to "New Heading!".

heading.style.color = "blue";: This line sets the color of the heading element to blue.

Answer 2

Potential Problems with setInterval():

Memory Leaks: If an interval is set and not cleared, the function associated with the interval will continue to be stored in memory, even if it's no longer needed. This can lead to a memory leak over time.

Unintended Side Effects: If the function executed by setInterval() takes a long time to complete, it can block the main thread of the browser, leading to a frozen or unresponsive user interface.

Methods to Prevent Problems:

clearInterval(): This function can be used to explicitly stop the interval when it's no longer needed. The ID returned by setInterval() is passed to clearInterval().
clearInterval(intervalId) - Stops the interval with the specified ID.

Debouncing/Throttling: These techniques limit the rate at which a function is executed. Debouncing delays the execution of a function until a certain period of inactivity has passed. Throttling ensures that a function is executed at most once within a specified time interval. This prevents the function from being called too frequently and potentially causing performance issues.

Answer 3

Answer: Here's a JavaScript function that filters an array of numbers to return a new array containing only the even numbers, using a for...of loop:

Function:


function getEvenNumbers(numbers) {
const evenNumbers = [];
for (const number of numbers) {
if (number % 2 === 0) {
evenNumbers.push(number);
}
}
return evenNumbers;
}

Explanation:

The function getEvenNumbers accepts an array of numbers called numbers as input.

It initializes an empty array called evenNumbers to store the even numbers.

The for...of loop iterates through each number in the numbers array.

Inside the loop, the if statement checks if the current number is even by using the modulo operator %. If number % 2 is equal to 0, it means the number is divisible by 2 and is therefore even.

If the number is even, it's added to the evenNumbers array using the push() method.

Finally, the function returns the evenNumbers array, which contains only the even numbers from the input array.

Example Usage:


const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = getEvenNumbers(numbers);
console.log(evenNumbers); // Output: [2, 4, 6]

21 Programming for the web (3)