Case Study Questions and Answers on JavaScript Fundamentals and DOM

Manipulation

1. Displaying a Line of Text

 Question: What are the different ways to display text in JavaScript?

 Answer: JavaScript provides several methods to display text, including:
1. document.write("Hello World");
2. console.log("Hello World");
3. alert("Hello World");
4. Manipulating HTML elements with innerHTML.

2. User Input with Prompt Dialogs

 Question: How can a JavaScript program take input from the user?
 Answer: JavaScript uses the prompt() function to take user input. Example:
 let name = prompt("Enter your name:");
 alert("Hello, " + name);

3. Arithmetic Operations

 Question: List the basic arithmetic operations in JavaScript and provide an example.
 Answer: The basic arithmetic operations are Addition (+), Subtraction (-),
Multiplication (*), Division (/), and Modulus (%). Example:
 let sum = 5 + 3;
 console.log("Sum: " + sum);

4. Control Statements

 Question: What is the difference between if and if-else statements?

 Answer: if executes a block of code only if the condition is true, while if-else
executes one block if the condition is true and another block if it is false.

5. Looping Statements

 Question: What are the differences between while, for, and do...while loops?
 Answer:
o while loop runs as long as the condition is true.
o for loop is used when the number of iterations is known.
o do...while runs at least once before checking the condition.

6. Switch Statement

 Question: How does a switch statement work in JavaScript?

 Answer: The switch statement evaluates an expression and executes code based on
matching cases.
 switch(day) {
 case 1: console.log("Monday"); break;
 case 2: console.log("Tuesday"); break;
 default: console.log("Other day");
 }
7. Break and Continue Statements

 Question: How do break and continue differ in JavaScript loops?

 Answer: break exits a loop, while continue skips the current iteration and proceeds
to the next one.

8. Logical Operators

 Question: Explain &&, ||, and ! operators with examples.

 Answer: These are logical operators used for conditions:
 let a = true, b = false;
 console.log(a && b); // false
 console.log(a || b); // true
 console.log(!a); // false

9. Function Definitions and Scope Rules

 Question: What are the different types of function scopes in JavaScript?

 Answer: JavaScript has Global Scope, Local Scope, and Block Scope (with let and
const).

10. Arrays in JavaScript

 Question: How do you declare and access an array element in JavaScript?

 Answer:
 let colors = ["Red", "Blue", "Green"];
 console.log(colors[0]); // Red

11. JavaScript Objects

 Question: What are built-in JavaScript objects? Give examples.

 Answer: Some built-in objects include:
o Math (e.g., Math.sqrt(25);)
o Date (e.g., new Date();)
o String (e.g., "Hello".length;)
o document (e.g., document.getElementById("id");)

12. DOM Manipulation

 Question: What is the DOM tree in JavaScript?

 Answer: The DOM (Document Object Model) represents the structure of an HTML
document as a tree where each element is a node.

13. Event Handling in JavaScript

 Question: Explain load, mousemove, and form submit events with examples.
 Answer:
 window.onload = () => console.log("Page loaded");
 document.addEventListener("mousemove", (event) =>
console.log(event.clientX, event.clientY));
  document.getElementById("form").addEventListener("submit", (event) =>
event.preventDefault());

14. Event Bubbling

 Question: What is event bubbling in JavaScript?

 Answer: Event bubbling is a mechanism where an event propagates from the target
element up through its parent elements in the DOM tree.

1. Displaying a Line of Text

// Using document.write
document.write("Hello World");

// Using console.log
console.log("Hello World");

// Using alert
alert("Hello World");

// Manipulating HTML elements with innerHTML

document.getElementById("message").innerHTML = "Hello World";

2. User Input with Prompt Dialogs

// Using prompt to take input
let name = prompt("Enter your name:");
alert("Hello, " + name);

3. Arithmetic Operations

let sum = 5 + 3;
console.log("Sum: " + sum);
let diff = 10 - 4;
console.log("Difference: " + diff);
let prod = 6 * 7;
console.log("Product: " + prod);
let div = 20 / 4;
console.log("Division: " + div);
let mod = 10 % 3;
console.log("Modulus: " + mod);

4. Control Statements

let age = 18;

if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

5. Looping Statements
// While loop
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

// For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}

// Do...while loop
let j = 0;
do {
console.log(j);
j++;
} while (j < 5);

6. Switch Statement

let day = 2;
switch(day) {
case 1: console.log("Monday"); break;
case 2: console.log("Tuesday"); break;
case 3: console.log("Wednesday"); break;
default: console.log("Other day");
}

7. Break and Continue Statements

// Break Example
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i);
}

// Continue Example
for (let i = 0; i < 10; i++) {
if (i === 5) continue;
console.log(i);
}

8. Logical Operators

let a = true, b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

9. Function Definitions and Scope Rules

// Global Scope
let globalVar = "I am global";

function localScope() {
 // Local Scope
let localVar = "I am local";
console.log(localVar);
}

localScope();
console.log(globalVar); // Accessible
// console.log(localVar); // Error: localVar is not defined

10. Arrays in JavaScript

let colors = ["Red", "Blue", "Green"];
console.log(colors[0]); // Red

11. JavaScript Objects

// Built-in Math Object
let squareRoot = Math.sqrt(25);
console.log(squareRoot);

// Built-in Date Object

let currentDate = new Date();
console.log(currentDate);

// Built-in String Object

let lengthOfString = "Hello".length;
console.log(lengthOfString);

// DOM Object
let element = document.getElementById("myElement");
console.log(element);

12. DOM Manipulation

// Changing content of an element with id 'message'
document.getElementById("message").innerHTML = "Content Changed!";

13. Event Handling in JavaScript

// Page load event
window.onload = () => console.log("Page loaded");

// Mouse move event

document.addEventListener("mousemove", (event) => {
console.log(event.clientX, event.clientY);
});

// Form submit event

document.getElementById("form").addEventListener("submit", (event) => {
event.preventDefault();
console.log("Form submission prevented");
});

14. Event Bubbling

// Event Bubbling example

document.getElementById("outerDiv").addEventListener("click", () => {
alert("Outer div clicked");
});
document.getElementById("innerDiv").addEventListener("click", (event) => {
alert("Inner div clicked");
event.stopPropagation(); // Stops the bubbling
});
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Number Checker</title>
</head>

<body>

<script>
// Get a number from the user
let num = prompt("Enter a number:");

// Convert the input to a number type

num = Number(num);

// Check if the input is a valid number

if (isNaN(num)) {
alert("Please enter a valid number.");
} else {
// Check if the number is positive, negative, or zero
if (num > 0) {
alert(`${num} is a positive number.`);
} else if (num < 0) {
alert(`${num} is a negative number.`);
} else {
alert(`The number is zero.`);
}
}
</script>

</body>

</html>
Event Handling in Java script

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Event Handling in JavaScript</title>

</head>

<body>

<h1>Event Handling Example</h1>

<p>Move your mouse to see coordinates in the console.</p>

<form id="form">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<button type="submit">Submit</button>

</form>

<script>

// Load event

window.onload = () => console.log("Page loaded");

// Mousemove event

document.addEventListener("mousemove", (event) => {

console.log("Mouse Position:", event.clientX, event.clientY);

});
 // Form submit event

document.getElementById("form").addEventListener("submit", (event) => {

event.preventDefault();

console.log("Form submission prevented");

});

</script>

</body>

</html>

This code demonstrates:

 The load event, which logs a message when the page is fully loaded.
 The mousemove event, which logs the mouse coordinates in the console.
 The submit event, which prevents the form from submitting and logs a message.

Output:

DOM manipulation

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>DOM Manipulation Example</title>
</head>

<body>
<h1>DOM Manipulation</h1>
<p id="message">Original Content</p>
 <button onclick="changeContent()">Change Content</button>

<script>
function changeContent() {
document.getElementById("message").innerHTML = "Content
Changed!";
}
</script>
</body>

</html>

Output

Event Bubbling

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Event Bubbling Example</title>
<style>
#outerDiv {
width: 300px;
height: 200px;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
}

#innerDiv {
width: 150px;
height: 100px;
background-color: lightcoral;
 text-align: center;
line-height: 100px;
}
</style>
</head>

<body>
<h1>Event Bubbling Example</h1>
<div id="outerDiv">
<div id="innerDiv">Click Me</div>
</div>

<script>
// Event Bubbling example
document.getElementById("outerDiv").addEventListener("click",
() => {
alert("Outer div clicked");
});
document.getElementById("innerDiv").addEventListener("click",
(event) => {
alert("Inner div clicked");
event.stopPropagation(); // Stops the bubbling
});
</script>
</body>

</html>