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>
