JavaScript questions and answers — basic
Callbacks, arrays, control statements and the other fundamentals, each with a runnable HTML example.
Source: js_qa_basic.docx — course material by Kiran V.K., published here so it is readable without a Google account.
1. Callback function in JavaScript with HTML code
A callback function is a function passed to another function to be called after the completion of an operation. Normal functions are directly invoked when called, but callback functions are invoked by another function.
HTML Example:
javascript
<!DOCTYPE html>
<html>
<body>
<script>
function greet(name) {
console.log("Hello " + name);
}
function processUserInput(callback) {
let name = prompt("Please enter your name.");
callback(name);
}
processUserInput(greet);
</script>
</body>
</html>In this example, greet is passed as a callback to processUserInput. When executed, the user is prompted for their name, and the callback is invoked to greet them.
2. Array creation in JavaScript with HTML code
Arrays in JavaScript are used to store multiple values in a single variable. Below is an example of how to create and access an array.
HTML Example:
javascript
<!DOCTYPE html>
<html>
<body>
<script>
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Mango
</script>
</body>
</html>This example creates an array fruits and accesses its elements using indices.
3. Control statements in JavaScript with HTML code
Control statements like if, else if, else, for, and while allow for decision-making and loops in JavaScript.
HTML Example:
javascript
<!DOCTYPE html>
<html>
<body>
<script>
let num = 5;
if (num > 0) {
console.log("Positive number");
} else {
console.log("Non-positive number");
}
for (let i = 0; i < 3; i++) {
console.log(i);
}
</script>
</body>
</html>This code demonstrates control statements in JavaScript, such as the if condition and the for loop.
4. Document Object Model in JavaScript with HTML code
The Document Object Model (DOM) allows JavaScript to manipulate HTML elements. The following example demonstrates how to modify a paragraph's content using JavaScript.
HTML Example:
markup
<!DOCTYPE html>
<html>
<body>
<p id="text">This is a paragraph.</p>
<script>
document.getElementById("text").innerHTML = "Modified paragraph!";
</script>
</body>
</html>This example uses the DOM to modify the paragraph content when the page loads.
5. Event handlers in JavaScript with HTML code
Event handlers are used to execute code when a specific event, such as a button click, occurs. Below is an example that changes the paragraph text upon button click.
HTML Example:
javascript
<!DOCTYPE html>
<html>
<body>
<p id="message">Welcome</p>
<button id="btn">Click</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("message").innerHTML = "<b>Hello from JavaScript</b>";
});
</script>
</body>
</html>This example listens for a button click and changes the paragraph content when the button is pressed.
6. Factorial program in JavaScript with HTML code
This JavaScript program calculates the factorial of a number, with the input gathered from a prompt dialog box.
HTML Example:
javascript
<!DOCTYPE html>
<html>
<body>
<script>
let num = prompt("Enter a number:");
let factorial = 1;
for (let i = 1; i <= num; i++) {
factorial *= i;
}
console.log("Factorial of " + num + " is " + factorial);
</script>
</body>
</html>7. JavaScript function in external .js file with HTML code
The following example demonstrates how to use an external JavaScript file to define a function and link it to an HTML page.
HTML Example:
markup
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<button onclick="greeting()">Click Me</button>
</body>
</html>External JavaScript (script.js):
code
function greeting() {
alert("Welcome to the website!");
}