------Repetition Quantifiers in Regular Expressions: ------Limitations of Regular Expressions

Repetition quantifiers in regular expressions are used to 1. Difficult to Read and Understand
specify how many times a character, word, or pattern Complex regular expressions become difficult to read and
should repeat in a string. They make pattern matching understand.
flexible and [Link] are commonly used in: Example
Form validation ,Password checking ,Mobile number let pattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-
validation ,Searching repeated patterns. Types of z]{2,}$/;
Repetition Quantifiers * → Zero or more occurrences • Such expressions are hard to remember and
+ → One or more occurrences ? → Zero or one maintain.
occurrence {n} → Exactly n occurrences {n,} → 2. Difficult to Debug
At least n occurrences {n,m} → Between n and m Errors in regular expressions are difficult to identify
occurrences because patterns can become very complicated.
1. * QuantifierThe * quantifier matches zero or more • Small mistakes may produce incorrect results.
occurrences of a character. Example: let text = • Debugging takes more time.
"Helloooo"; [Link](/o*/.test(text)); 3. Poor Readability for Large Patterns
Output: true Explanation: o* checks for zero or more o Long regex patterns reduce code readability.
characters. Since the string contains multiple o, it returns Example
true. 3. ? Quantifier: The ? quantifier matches zero or let pattern = /^(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$]).{8,}$/;
one occurrence. Example: let text = "color"; • Beginners may find such patterns confusing.
[Link](/colou?r/.test(text)); Output: true 4. Limited for Complex Parsing
Explanation: u? means u is optional. It matches both Regular expressions are not suitable for parsing complex
color and colour. 4. {n} Quantifier: Matches exactly n structured data like:
occurrences. Example: let text = "1234"; • HTML
[Link](/\d{4}/.test(text)); Output: true Explanation: • XML
\d{4} matches exactly 4 digits • JSON
They cannot properly handle deeply nested structures.
-------Search() and Split() Method: JavaScript provides 5. Performance Issues
string methods like search() and split() that work with Very large or poorly written regex patterns can slow down
regular expressions. These methods are useful for program execution.
searching patterns and dividing strings efficiently. 1. • Repeated backtracking affects performance.
search() Method: The search() method searches a string • Large text processing becomes inefficient.
for a specified pattern using a regular expression and 6. Hard to Maintain
returns the position of the first match. If no match is Complex expressions become difficult to modify later.
found, it returns -1. Syntax: [Link](regexp) • Updating patterns requires careful handling.
Example of search() Method: let text = "Learn JavaScript • Maintenance becomes time-consuming.
Programming"; let result = [Link](/JavaScript/); 7. Limited Logical Operations
[Link](result); Output:6 2. split() Method: The Regular expressions are mainly designed for pattern
split() method divides a string into an array based on a matching and cannot perform advanced logical
separator or regular expression Syntax: operations or calculations.
[Link](regexp) Example of split() Method: let text = For example:
"Apple, Mango, Orange"; let result = [Link](/,\s*/); • Mathematical computations
[Link](result); Output: ['Apple', 'Mango', 'Orange'] • Data relationships
• Complex business logic
------Greedy Matching in Regular Expressions:Greedy cannot be handled effectively.
matching is a behavior in regular expressions where the 8. Browser and Language Differences
pattern tries to match the largest possible portion of a Some advanced regex features may behave differently in
string. By default, quantifiers such as: * ,+ ,{n,m} different programming languages or browsers.
perform greedy matching. This means they consume as • Compatibility issues may occur.
many characters as possible while still allowing the Advantages Despite Limitations
overall pattern to [Link] of Greedy Matching: 1. Fast text searching
let text = "<h1>Hello</h1>"; let result = 2. Useful for validation
[Link](/<.*>/); [Link](result); 3. Reduces coding effort
Output: ['<h1>Hello</h1>'] Another Example: let text = 4. Powerful for simple pattern matching
"aaaa"; let result = [Link](/a+/); [Link](result);
Output: ['aaaa']
------Write a simple and short JS code for a simple <input type="text"><br><br>
calculator using JS for operations like addition,
multiplication, subtraction, division, and square of a Mobile:
number, etc. <input type="text"><br><br>

<!DOCTYPE html> Email:

<html> <input type="email"><br><br>
<head>
<title>Simple Calculator</title> Gender:
</head> <input type="radio" name="g">Male
<input type="radio" name="g">Female
<body> <br><br>

<script> <input type="submit" value="Submit">

let a = 10; </form>

let b = 5;
</body>
// Addition </html>
[Link]("Addition = " + (a + b));

// Subtraction
[Link]("Subtraction = " + (a - b));

// Multiplication
[Link]("Multiplication = " + (a * b));

// Division
[Link]("Division = " + (a / b));

// Square
[Link]("Square of a = " + (a * a));

</script>

</body>
</html>

------Write a simple JS code to create a student

information form to accept information like name,
address, city, state, gender, mobile number, and email
ID.

<!DOCTYPE html>
<html>
<body>

<h3>Student Form</h3>

<form>

Name:
<input type="text"><br><br>

City:
------DOM Methods: DOM (Document Object Model) [Link]("parent").addEventListener("
methods are used to access and manipulate HTML click", function() { alert("Parent Div"); }, true);
elements in a webpage using JavaScript. [Link]("child").addEventListener("cli
getElementById() → Accesses element using ID ck", function() { alert("Button"); }, true);
getElementsByTagName() → Accesses elements using tag </script> </body> </html> Output Flow: Parent Div
name getElementsByClassName() → Accesses elements Button
using class name querySelector() → Accesses first
matching element querySelectorAll() → Accesses all ------Creating, Inserting, and Appending Nodes in DOM
matching elements getElementsByName() → Accesses In JavaScript, the DOM (Document Object Model) allows
elements using name attribute developers to dynamically create and manipulate HTML
1. getElementById() Method: The getElementById() elements called nodes.
method accesses an HTML element using its unique ID. Nodes can be: Elements ,Text ,Attributes , Comments
Syntax: [Link]("idname") Example: Using DOM methods, we can create, insert, and append
<p id="demo">Hello Students</p> nodes dynamically in a webpage.
<script> let element = 1. Creating Nodes in DOM:The createElement() method
[Link]("demo"); is used to create a new HTML element.
[Link]([Link]); </script> Syntax: [Link]("tagname")
Output: Hello Students 2. getElementsByClassName() Example:let para = [Link]("p");
Method: The getElementsByClassName() method [Link] = "Hello Students";
accesses elements having the same class name. Syntax 2. Appending Nodes in DOM:The appendChild() method
[Link]("classname") adds a node as the last child of an element.
Example: <p class="msg">Welcome</p> <p Syntax:[Link](child)
class="msg">JavaScript</p> <script> Example: <body> <div id="demo"></div> <script> let
let elements = para = [Link]("p"); [Link] =
[Link]("msg"); "Welcome to JavaScript";
[Link](elements[0].innerHTML); </script> [Link]("demo").appendChild(para);
Output: Welcome 3. querySelector(): Returns the first </script> </body> Output: Welcome to JavaScript
matching element. Example: 3. Inserting Nodes in DOM: The insertBefore() method
[Link]("p"); [Link]() inserts a node before another existing node. Syntax:
Returns all matching elements. Example [Link](newNode, existingNode)
[Link]("p"); Example: <body> <ul id="list"> <li>HTML</li>
<li>CSS</li> </ul> <script>
------NetScape 4 Event Model: The NetScape 4 Event let newItem = [Link]("li");
Model is an older JavaScript event handling model [Link] = "JavaScript"; let list =
introduced in the Netscape Navigator 4 browser. It [Link]("list");
defines how events are captured and processed in a [Link](newItem, [Link][1]); </script>
webpage. This model mainly uses the concept of Event </body> Output: HTML JavaScript CSS.
Capturing. What is an Event? An event is an action
performed by the user or browser, such as: Mouse click, ------DOM (Document Object Model): The DOM stands
Key press, Page loading , Mouse movement JavaScript for Document Object Model. It is a programming
responds to these actions using event handlers. interface that represents an HTML document as a tree
Event Flow in NetScape 4 Model: The NetScape 4 model structure of [Link] the DOM, JavaScript can:
follows the Capturing Phase. In event capturing: The Access HTML elements ,Modify content ,Change styles
event starts from the outermost element. It moves ,Add or remove elements ,Handle events dynamically.
towards the target element. Flow: Window → Document The browser creates the DOM when a webpage is loaded.
→ HTML → Body → Target Element Structure of DOM:The DOM represents HTML elements
Example of NetScape 4 Event Model: <html> in hierarchical form. Example Structure: <html> <body>
<body> <div onclick="alert('DIV Clicked')"> <button <h1>Hello</h1> <p>Welcome</p> </body> </html>
onclick="alert('Button Clicked')"> Click Me </button> DOM Tree Representation
</div> </body> </html> Event Capturing: Event Document → HTML → BODY → H1
capturing means handling events before they reach the ↓
target element. Syntax addEventListener(event, function, P
true) Example of Event Capturing Example of DOM: <p id="demo">Hello Students</p>
<html> <body> <div id="parent"> <button <script> [Link]("demo").innerHTML
id="child">Click </button> </div> <script> = "Welcome"; </script>
------HTML Elements: HTML elements are the building 2. Event Capturing vs Event Bubbling
blocks of a webpage. They define the structure and Event Capturing: Event travels from parent to child
content of web [Link] elements are written using element. Flow: Window → Document → HTML → Body
tags. → Target Event Bubbling: Event travels from child to
Syntax of HTML Element:<tagname>Content</tagname> parent element.
Example of HTML Elements:<h1>This is Heading</h1> Flow:Target → Body → HTML → Document → Window
<p>This is Paragraph</p> Issue:Different browsers handled propagation differently,
Common HTML Elements: <h1> to <h6> → Headings leading to inconsistent event execution.
<p> → Paragraph <img> → Image <a> → Hyperlink 3. Multiple Event Handlers Conflict:When multiple
<table> → Table <form> → Form handlers are attached to the same element, conflicts may
Relationship Between DOM and HTML Elements: HTML occur. Example: <button onclick="fun1()"
elements form the webpage structure. DOM represents onclick="fun2()"> Click </button> One event handler
these elements as objects. JavaScript uses the DOM to may overwrite another.
manipulate HTML elements dynamically. 4. Event Object Differences:Different browsers provided
different event object properties. Example: [Link]
---Event:An event is an action or occurrence that happens Used in modern browsers. [Link]
in the browser or webpage. Events are generated by the Used in older Internet Explorer. Issue: Developers had to
user or browser. Examples of events: Mouse click ,Key write extra code for browser compatibility.
press ,Page loading , Mouse movement ,Form submission 5. Memory Leak Problems:Older browsers, especially
JavaScript responds to these events to make webpages Internet Explorer, caused memory leaks when event
[Link] Types of Events: onclick → Occurs handlers were not removed properly. Example
when element is clicked onmouseover → Occurs when [Link] = null;
mouse moves over element. onkeydown → Occurs • Event handlers needed to be cleared manually.
when key is pressed. onload → Occurs when page loads 6. Difficulty in Removing Event Listeners:Anonymous
onsubmit → Occurs when form is submitted functions cannot be removed easily. Example
[Link]("click", function() {
------Event Handler: An event handler is a JavaScript alert("Hello"); });
function or code that executes when an event occurs. • The handler cannot be removed later because it
It tells the browser what action should be performed has no reference.
when the event happens. Syntax: <tag event="JavaScript 7. Event Propagation Problems: Sometimes parent and
code"> Example of Event and Event Handler: <html> child events execute together unintentionally.
<body> <button onclick="showMessage()"> Click Me Example: <div onclick="alert('DIV')">
</button> <script> function showMessage() { <button onclick="alert('BUTTON')"> Click
alert("Button Clicked"); } </script> </body> </button> </div> Issue: Clicking button triggers both
</html> Output: When the user clicks the button, an alert button and div events.
box appears displaying: Button Clicked Another Example Solution: [Link](); Stops further
<input type="text" onfocus="changeColor(this)"> propagation.
<script> function changeColor(element) {
[Link] = "yellow"; } </script>

------Different Event Model Issues in JavaScript:Event

models define how events are handled in web browsers.
Different browsers originally followed different event
models, which created compatibility and handling issues
in [Link] main event model issues are related to:
Event propagation ,Browser differences ,Event handling
conflicts 1. Browser Compatibility Issues: Different
browsers used different event models. Netscape
Navigator used the Event Capturing Model. Internet
Explorer used the Event Bubbling Model. This caused
inconsistent behavior across browsers. Example:
[Link]("click", myFunction, true);
• true indicates capturing mode.
[Link]("onclick", myFunction);
• Older Internet Explorer used attachEvent().
------Browser Object Model (BOM):The Browser Object Changing Properties of Frames:Frame properties can be
Model (BOM) is a collection of objects provided by the modified using attributes of the <frame> tag.
browser that allows JavaScript to interact with the Important Frame Properties: src → Specifies webpage
browser window and browser features. Using BOM, source name → Assigns frame name
JavaScript can: Access browser information ,Control scrolling → Enables/disables scrolling noresize →
browser windows ,Manage navigation ,Display dialogs , Prevents frame resizing border → Sets border size
Handle screen information. Unlike the DOM, BOM is not marginwidth → Sets left-right margin marginheight →
related to webpage content only; it deals with the Sets top-bottom margin.
browser environment. Main Objects in BOM: window , Example with Frame Properties: <html> <frameset
document , navigator , location , history , screen cols="40%,60%"> <frame src="[Link]"
1. Window Object:The window object is the top-level name="leftFrame" scrolling="yes" noresize>
object in [Link] represents the browser window. <frame src="[Link]" border="5" marginwidth="20"
[Link]("Welcome"); marginheight="20"> </frameset> </html>
Functions of Window Object:Open new window ,Close
window ,Display alerts ,Set timers ------Controlling Window: Controlling a window means
2. Document Object:The document object represents the managing and manipulating browser windows using
HTML document loaded in the browser. JavaScript. The Browser Object Model (BOM) provides
Example: [Link]("Hello"); Uses: Access HTML the window object, which allows developers to perform
elements ,Modify webpage content operations such as opening, closing, resizing, and moving
3. Navigator Object:The navigator object provides browser windows. The window object is the top-level
browser information. Example: object in JavaScript BOM. Uses of Window Control: Open
[Link]([Link]); new browser windows ,Close existing windows ,Resize
Information Provided: Browser name ,Browser version , browser windows ,Move windows on screen ,Display
Operating system alert and dialog boxes
4. Location Object:The location object contains URL Different Window Methods and Their Uses:
information. Example: [Link]([Link]); [Link]() → Opens a new browser window
Uses: Get webpage URL , Redirect webpage [Link]() → Closes current window
5. History Object: The history object manages browser [Link]() → Displays alert box
history. Example: [Link](); [Link]() → Displays confirmation dialog
Functions: Move backward , Move forward in browser [Link]() → Accepts user input
history 6. Screen Object: The screen object provides [Link]() → Resizes window
information about the user’s screen. Example [Link]() → Moves window position
[Link]([Link]); [Link]() → Executes function after specified
Information Provided: Screen width ,Screen height , Color time [Link]() → Repeats function
depth continuously
1. [Link]() Method: Used to open a new browser
------Frame in HTML: A frame is an HTML feature used to window. Syntax: [Link]("URL");
divide a browser window into multiple sections, where Example: [Link]("[Link]
each section can display a separate HTML document. 2. [Link]() Method: Used to close the current
Frames allow multiple webpages to be displayed in a browser window. Example: [Link]();
single browser window. Frames were created using the 3. [Link]() Method: Displays an alert message
<frameset> and <frame> tags in older versions of HTML. box. Example: [Link]("Welcome Students");
HTML Tags Used to Create Frames: <frameset> → Defines Output: Welcome Students
arrangement of frames <frame> → Defines individual 4. [Link]() Method: Displays a confirmation
frame <noframes> → Displays content if browser does box with OK and Cancel buttons. Example:
not support frames [Link]("Are you sure?");
1. <frameset> Tag: The <frameset> tag divides the 5. [Link]() Method: Displays an input dialog
browser window into rows or columns. Syntax: <frameset box. Example: [Link]("Enter your name");
rows="value"> or <frameset cols="value"> 6. [Link]() Method: Used to resize the browser
2. <frame> Tag: The <frame> tag specifies the webpage window. Example: [Link](500, 400);
displayed inside a frame. Syntax: <frame 7. [Link]() Method: Moves the browser
src="[Link]"> Example of Frames: <html> <frameset window to specified coordinates. Example:
cols="30%,70%"> <frame src="[Link]"> <frame [Link](100, 100);
src="[Link]"> </frameset> </html>
8. [Link]() Method: Executes a function <html> <body> <script> alert("Welcome to JavaScript");
after a specified time. Example: setTimeout(function() { </script> </body> </html> Output: A popup dialog box
alert("Hello"); }, 2000); appears displaying: Welcome to JavaScript.
2. confirm() Method: The confirm() method displays a
------Location Object in JavaScript:The location object is a dialog box with: OK button , Cancel button. It is used to
part of the Browser Object Model (BOM). It contains get confirmation from the user. Syntax:
information about the current URL of the webpage and confirm("message");
provides methods to load or redirect webpages. Using Example of confirm() Method: <html>
the location object, JavaScript can: Get webpage URL <body> <script> let result = confirm("Do you want to
information , Redirect to another webpage , Reload the continue?"); if(result) { alert("You pressed OK");
current page Syntax: [Link] or simply }else { alert("You pressed Cancel"); } </script>
location Properties of Location Object: href → Returns </body> </html> Output: A confirmation dialog box
complete URL hostname → Returns domain name appears: Do you want to continue? If user clicks OK →
pathname → Returns path of webpage protocol → "You pressed OK" If user clicks Cancel → "You pressed
Returns protocol used port → Returns port number Cancel".
hash → Returns anchor part of URL search → Returns
query string 1. href Property: Returns the complete URL ------Form Usability: Form usability refers to how easy
of the current webpage. Example: and user-friendly a web form is for users to understand,
[Link]([Link]); Output Example fill out, and submit correctly. A usable form should: Be
[Link] simple and clear , Provide proper instructions , Prevent
2. hostname Property: Returns the domain name. user errors , Give quick feedback. Good form usability
Example: [Link]([Link]); Output: improves user experience and increases successful form
[Link] 3. pathname Property: Returns the submissions. Features of Good Form Usability: Simple
path and filename of the webpage. Example: form design , Proper labels and instructions , Error
[Link]([Link]); Output: /[Link] messages for invalid input , Easy navigation between
4. protocol Property: Returns the protocol used in URL. fields , Fast response and validation
Example: [Link]([Link]); Output: https: Role of JavaScript in Form Usability: JavaScript improves
5. search Property: Returns query parameters from URL. form usability by making forms interactive and dynamic.
Example: [Link]([Link]); Output Example: Using JavaScript, developers can: Validate form data ,
?id=101 Display error messages instantly , Automatically focus
fields , Enable or disable buttons , Improve user
------Methods of Location Object: assign() → Loads a new interaction
document reload() → Reloads current webpage Example of Form Validation Using JavaScript: <html>
replace() → Replaces current document toString() → <body> <form onsubmit="return validateForm()">
Returns URL as string Name: <input type="text" id="name">
1. assign() Method: Loads a new webpage. <input type="submit" value="Submit">
Syntax: [Link]("URL"); Example: </form> <script> function validateForm() {
[Link]("[Link] let name = [Link]("name").value;
2. reload() Method: Reloads the current webpage. if(name == "") { alert("Name cannot be empty");
Example: [Link](); return false; } return true;
3. replace() Method: Replaces current webpage with } </script> </body> </html>
another webpage. Example Common JavaScript Features Used in Forms:
[Link]("[Link] • Validation → Checks user input
• Event Handling → Responds to user actions
-------alert() and confirm() Methods of Window Object • Dynamic Fields → Adds/removes fields
The window object in JavaScript provides several dynamically
methods for interacting with users. Among them, alert() • Auto-complete → Suggests input values
and confirm() are commonly used dialog box methods. • Error Handling → Displays validation messages
These methods display popup boxes in the browser.
1. alert() Method: The alert() method displays a message
box with an OK button. It is used to: Show warning
messages , Display information , Notify users
Syntax: alert("message"); Example of alert() Method