1
← Back to quizzesFree quiz
Fundamentals of JavaScript Programming
When you embed JavaScript directly into an HTML page, the code is interpreted by the browser at runtime . No server‑side compilation or third‑party plugins are required. The browser's…
0 / 10
Score: 0%
2
Given the code `var x = 5; x += 3;`, what is the final value of `x`?
3
Which of the following is a valid way to attach a click handler to a button element using the modern DOM API?
4
What will `typeof null` return in JavaScript?
5
In the following snippet, what is the effect of `document.write("Result:" + result);`?
6
Which loop construct will execute its body exactly five times, starting with `i = 0`?
7
When a form field named `email` is empty, which JavaScript expression correctly tests this condition?
8
What is the result of `parseInt("12px")` in JavaScript?
9
Which of the following statements about the `break` statement inside a `while` loop is true?
10
If you need to change the border color of an input element when it receives focus, which event attribute should you use in the HTML markup?
Understanding the JavaScript Execution Environment
When you embed JavaScript directly into an HTML page, the code is interpreted by the browser at runtime. No server‑side compilation or third‑party plugins are required. The browser's JavaScript engine reads the script, parses it, and executes it immediately as the page loads. This client‑side execution model enables dynamic interactivity without additional round‑trips to the server.
Key Points
- Interpretation vs. compilation: Modern browsers use just‑in‑time (JIT) compilation internally, but from a developer’s perspective the script is treated as interpreted code.
- All JavaScript runs in the context of the current page, meaning it can manipulate the DOM, handle events, and access global variables.
- No external Java applets or plugins are needed; the native engine (V8, SpiderMonkey, Chakra, etc.) handles execution.
Basic Arithmetic and Assignment Operators
JavaScript provides concise operators for updating variable values. The expression var x = 5; x += 3; uses the addition assignment operator (+=) to add 3 to the existing value of x. After execution, x holds the value 8.
Why += Matters
- It combines addition and assignment in a single step, improving readability.
- Works with other data types (e.g., strings) to concatenate values.
- Reduces the chance of typographical errors compared to writing
x = x + 3;.
Modern Event Handling with the DOM API
Attaching event listeners in a standards‑compliant way is essential for maintainable code. The preferred method is addEventListener:
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
// Your click‑handler logic here
});This approach offers several advantages over older techniques:
- Supports multiple listeners for the same event type.
- Provides control over event propagation with options like
{ once: true }or{ capture: true }. - Avoids overwriting existing handlers, which can happen with
onclickassignments.
Understanding typeof and the Null Quirk
In JavaScript, the typeof operator returns a string indicating the type of a value. For the special value null, typeof null yields "object". This is a historic bug dating back to the first implementation of JavaScript, but it remains part of the language specification for backward compatibility.
Practical Tip
When checking for null, avoid relying on typeof. Instead, use a strict equality comparison:
if (value === null) {
// handle null case
}Using document.write Safely
The method document.write("Result:<\/B>" + result); inserts the bold text "Result:" followed by the value of result at the current cursor position in the document. It does not log to the console, create a new element in the <head>, nor replace the entire page content (unless called after the page has finished loading, which would overwrite the document).
When to Use It
- Primarily for simple demos or learning exercises.
- Not recommended for production code because it can interfere with the page’s loading flow.
Loop Constructs: Executing Code a Fixed Number of Times
To run a block exactly five times starting with i = 0, the classic for loop is ideal:
for (let i = 0; i < 5; i++) {
// loop body executes five times
}This loop initializes i at 0, checks the condition i < 5 before each iteration, and increments i after each pass. Variations such as while (i <= 5) would run six times, while a do…while loop would guarantee at least one execution even if the condition were false initially.
Form Validation: Checking for Empty Fields
When a form field named email is empty, the correct way to test this condition is:
if (document.forms[0].elements["email"].value === "") {
// The email field is empty
}Other options like checked apply to checkboxes or radio buttons, while comparing to null or using != undefined are not reliable for empty text inputs.
Parsing Numbers from Strings
The function parseInt("12px") extracts the leading numeric characters and returns the integer 12. Non‑numeric trailing characters are ignored, but if the string does not start with a digit, parseInt returns NaN.
Best Practices
- Always specify the radix:
parseInt(str, 10)to avoid unexpected base detection. - Use
Number()orparseFloat()when you need to preserve decimal values.
Summary of Core Concepts
This course covered the fundamental aspects of JavaScript programming that appear in typical introductory quizzes:
- Client‑side execution without server compilation.
- Arithmetic assignment operators like
+=. - Modern event handling with
addEventListener. - The quirky
typeof nullresult. - How
document.writeinjects content. - Correct
forloop syntax for a fixed iteration count. - Validating empty form fields.
- Parsing integers from mixed strings.
Mastering these basics provides a solid foundation for more advanced JavaScript topics such as asynchronous programming, module systems, and modern frameworks.
