JavaScript Validation & Built-in
Objects
What is Validation in JavaScript?
• Validation checks if user inputs meet specific
criteria.
• Two types: Client-side (JavaScript), Server-side
(PHP, Node.js)
• Ensures data correctness before sending to
the server.
Common Validation Checks
• Required field check
• Email format
• Password length
• Numeric values
• Date format
Example: Required Field Validation
• <script>
• function validateForm() {
• let name =
document.forms["myForm"]["username"].value;
• if (name == "") {
• alert("Name must be filled out");
• return false;
• }
• }
• </script>
Built-in JavaScript Objects Overview
• JavaScript provides several built-in objects to
simplify tasks.
• Categories:
• Core Objects (String, Number, Boolean)
• Data Structures (Array, Object)
• Utility (Math, Date, RegExp)
• Global Objects (JSON, console)
String Object
• let text = "Hello";
• console.log(text.length); // 5
• console.log(text.toUpperCase()); // "HELLO"
Number Object
• let x = 123.45;
• console.log(x.toFixed(1)); // "123.5"
• console.log(Number.isInteger(x)); // false
Math Object
• console.log(Math.round(4.7)); // 5
• console.log(Math.random()); // Random
number between 0 and 1
Date Object
• let now = new Date();
• console.log(now.toDateString()); // "Tue Aug 5
2025"
Array Object
• let fruits = ["Apple", "Banana", "Mango"];
• console.log(fruits.length); // 3
• console.log(fruits.join(", ")); // "Apple,
Banana, Mango"
RegExp Object
• let pattern = /^[0-9]+$/;
• console.log(pattern.test("123")); // true
• console.log(pattern.test("abc")); // false
JSON Object
• let obj = { name: "John", age: 30 };
• let json = JSON.stringify(obj);
• console.log(json); //
'{"name":"John","age":30}'
console Object
• console.log("Message");
• console.error("Error");
• console.warn("Warning");
Summary
• JavaScript offers built-in objects to simplify
development.
• Validation ensures user inputs are correct
before processing.
• Essential for form handling, data formatting,
and app logic.
What is a JavaScript Event?
• An event is an action that occurs in the
browser.
• Examples: clicking a button, submitting a form,
moving the mouse.
• JavaScript can react to these events using
event handlers.
Common JavaScript Events
• onclick – when an element is clicked
• onmouseover – when the mouse hovers over an
element
• onmouseout – when the mouse leaves an element
• onchange – when the value of an input changes
• onsubmit – when a form is submitted
• onload – when the page finishes loading
Using HTML Event Attributes
• <button onclick="sayHello()">Click
Me</button>
• <script>
• function sayHello() {
• alert("Hello!");
• }
• </script>
Adding Events Using JavaScript
• <button id="btn">Click Me</button>
• <script>
• document.getElementById("btn").onclick =
function() {
• alert("Button clicked!");
• }
• </script>
addEventListener Method
• <button id="btn2">Click Me Too</button>
• <script>
•
document.getElementById("btn2").addEventLi
stener("click", function() {
• alert("Handled by addEventListener");
• });
• </script>
Event Object
• <button id="eventBtn">Click for Event
Info</button>
• <script>
•
document.getElementById("eventBtn").addEventL
istener("click", function(event) {
• console.log("Event type: " + event.type);
• console.log("Target ID: " + event.target.id);
• });
• </script>
Event Propagation
• Describes how events move through the DOM
tree.
• Phases: Capturing, Target, Bubbling.
• Event handlers can be set for either phase.
Preventing Default Behavior
• <a href="https://example.com" id="link">Go to
site</a>
• <script>
•
document.getElementById("link").addEventListen
er("click", function(event) {
• event.preventDefault();
• alert("Default behavior prevented!");
• });
• </script>
Summary
• JavaScript events allow developers to create
interactive web pages.
• Handlers can be added via HTML or JavaScript.
• Use addEventListener for cleaner and more
flexible code.
Introduction to DHTML
• DHTML stands for Dynamic HTML
• Not a language, but a collection of
technologies:
– HTML
– CSS
– JavaScript
– DOM (Document Object Model)
• Purpose: Create interactive and dynamic
webpages without server interaction
What is JavaScript?
• A scripting language for web development
• Runs in the browser to:
– Validate forms
– Modify content
– Handle events
– Create animations
• Key part of DHTML for interactivity
How DHTML & JavaScript Work
Together
Real-World Uses
• Interactive menus and dropdowns
• Drag-and-drop features
• Real-time form validation
• Expanding/collapsing sections
• Updating content without page reload (AJAX)
DHTML Components
• HTML – for content structure.
• CSS – for styling and layout.
• JavaScript – for logic and interactivity.
• DOM – for accessing and manipulating page
elements.
JavaScript Role in DHTML
• Manipulates HTML content dynamically.
• Changes CSS styles on events.
• Interacts with the DOM in real-time.
• Responds to user actions such as clicks or
keypresses.
Example: Change Text Dynamically
• <p id="demo">Original Text</p>
• <button
onclick="document.getElementById('demo').in
nerHTML = 'Text Changed!'">Click
Me</button>
Example: Style Change with
JavaScript
• <p id="styleText">Hello World</p>
• <button
onclick="document.getElementById('styleText'
).style.color = 'blue'">Change Color</button>
Example: Moving Object
• <div id="moveBox" style="position:absolute;
left:0; top:50px;">Move Me</div>
• <button
onclick="document.getElementById('moveBox
').style.left='100px'">Move</button>
Benefits of DHTML
• Improved user experience.
• Reduces server load.
• Fast and responsive web applications.
Drawbacks of DHTML
• Browser compatibility issues.
• Complexity increases with interactivity.
• Requires JavaScript enabled in browsers.
Conclusion
• DHTML leverages JavaScript for interactive
web pages.
• JavaScript enables real-time user interactions
and content updates.
• DHTML was a stepping stone to modern
dynamic web development.
Benefits of Using DHTML
• Enhances user experience
• Reduces server load
• Improves responsiveness
• Enables client-side interaction
Limitations
• Browser compatibility issues
• Can be complex for large-scale apps
• Harder to debug compared to static HTML
• May affect page performance if overused
Best Practices
• Keep JavaScript modular and clean
• Minimize DOM manipulation for performance
• Test across browsers
• Use modern frameworks (like jQuery or Vanilla
JS)
