Front-End Design and Testing: JavaScript, DOM, Form Controls, and Validation

Comprehensive practice flashcards covering core JavaScript concepts, HTML form integration, DOM tree manipulation, array methods, built-in objects, and Regular Expression validation.

Where should the external JavaScript <script> tag be placed in an HTML document, and why?

It should be placed before the closing </body> tag to ensure that HTML elements are fully loaded and exist in the browser before JavaScript attempts to access them.

How do textboxes, radio buttons, and checkboxes differ in how JavaScript reads their values?

A textbox stores a single value and is read directly using .value without a loop. Radio buttons exist in a group representing one selected option, requiring a for loop to check the .checked property and read its .value. Checkboxes allow multiple selections, requiring a for loop to inspect .checked and store all selected values into an array using push().

What is the 5-step algorithm for reading the selected option from a group of radio buttons in JavaScript?

1. Get all radio buttons.
2. Start from the first radio button.
3. Check whether it is selected.
4. If selected, save its value.
5. Continue until all radio buttons are checked.

Why must objects and arrays be converted using JSON.stringify() before saving them to localStorage?

localStorage saves only text data, so objects and arrays must be converted into string format using JSON.stringify() before calling localStorage.setItem(), and parsed back into objects/arrays using JSON.parse() after retrieval with localStorage.getItem().

What is the complete form processing flow from user input to displaying data in an HTML table?

HTML Form → User enters data → Click Register → Validation → Read Values → Create Student Object → Store in Array → Save to Local Storage → Display HTML Table.

When adding a newly constructed table row to an existing HTML table using innerHTML, why is += used instead of =?

The += operator appends new rows while preserving existing rows, whereas = would overwrite the entire content and delete all previous rows.

What is the definition of JavaScript provided in the lecture?

JavaScript is a lightweight, interpreted scripting language used to make web pages interactive.

Where does JavaScript execute in web application architecture, and what is its role relative to the server?

JavaScript runs directly inside the user's browser, enabling web pages to become interactive and process tasks before communicating with the server.

What three sequential steps define the core flow of interactivity in JavaScript?

Event → Function → Update: A user action triggers an event, JavaScript executes the associated function, and the function updates the content (DOM) on the page instantly.

What is the Document Object Model (DOM), and what do the terms 'Document', 'Object', and 'Model' stand for?

The DOM is a programming interface created by the browser that represents every HTML element as an object organized in a tree structure. 'Document' refers to the Entire Web Page, 'Object' means Everything becomes an Object, and 'Model' describes the Hierarchical Structure.

In the DOM Tree Structure shown, what represents the Root Node, and what is the parent node of <head> and <body>?

The Root Node is Document, and the parent node of both <head> and <body> is the <html> element node.

According to the DOM terminology table, which nodes serve as examples of Root Node, Parent Node, Child Node, and Sibling Nodes?

Root Node: Document Parent Node: body Child Node: input Sibling Nodes: h1, input, button

What is the functional difference between querySelector() and querySelectorAll()?

querySelector() finds the first matching CSS selector, while querySelectorAll() finds all matching CSS selectors.

In the DOM method syntax document.getElementById("name"), what is the meaning of each constituent part?

document: Current webpage .: Access operator get: Retrieve Element: HTML element By: Using Id: Unique identifier ("name"): ID to search

Based on the array diagram, which element is retrieved at index $2$, and what is the index of element "ABC"?

Element "John" is located at index $2$, and "ABC" is located at index $0$.

What are the specific purposes of the array operations length, push(), pop(), shift(), and unshift()?

length: Find number of elements push(): Add a new element pop(): Remove last element shift(): Remove first element unshift(): Add element at beginning

What are the roles and examples of JavaScript's built-in objects: Math, Date, String, Number, and Array?

Math: Mathematical calculations (e.g., random numbers, square root) Date: Date and Time (e.g., current date) String: Text operations (e.g., uppercase, lowercase) Number: Numeric operations (e.g., convert text to numbers) Array: Collection handling (e.g., store multiple values)

What is a Regular Expression (Regex)?

A Regular Expression (Regex) is a sequence of characters used to define a search pattern for matching, validating, or searching text.

In Regular Expressions, what do the symbols ^, $, [A-Z], [a-z], [0-9], +, and * denote?

^: Start of text (Starts with) $: End of text (Ends with) [A-Z]: Uppercase letter [a-z]: Lowercase letter [0-9]: Digit +: One or more (At least one) *: Zero or more (Optional repetitions)

What is the step-by-step registration form validation workflow using DOM and Regex?

Student Enters Data → DOM Reads Input → Regex Checks Format → Valid? → YES: Store Data; NO: Display Error.