JavaScript: From DOM to Built-in Objects - Detailed Notes
1. Document Object Model (DOM)
------------------------------
- The DOM is a programming interface for HTML and XML documents.
- It represents the page so that programs can change the document structure, style, and content.
- Every element, attribute, and text in the HTML document becomes a node in the DOM tree.
- JavaScript interacts with the DOM to dynamically update content without reloading the page.
Example:
HTML: <p id="demo">Original Text</p>
JS: document.getElementById("demo").innerHTML = "Hello DOM";
2. Form Validation
------------------
- Form validation ensures users enter the required information in the correct format before
submission.
- It improves user experience and reduces server-side errors.
- Validation types: required fields, correct format (email, phone), min/max value, etc.
Example:
<form name="myForm" onsubmit="return validateForm()">
<input type="text" name="fname">
</form>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
</script>
3. Regular Expressions
----------------------
- A Regular Expression (RegEx) is a sequence of characters that defines a search pattern.
- Used for pattern matching and string validation.
Example:
let pattern = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
let result = pattern.test("[email protected]"); // Returns true
- Common uses: email validation, password strength, finding/replacing text.
4. DHTML (Dynamic HTML) with JavaScript
---------------------------------------
- DHTML is not a separate language. It's a combination of HTML, CSS, JavaScript, and DOM.
- It allows web pages to be interactive and dynamic without reloading.
- Enables animation, form validation, content changes, and more.
Example:
HTML:
<button onclick="showMessage()">Click Me</button>
<p id="msg"></p>
JS:
<script>
function showMessage() {
document.getElementById("msg").innerHTML = "Hello DHTML!";
</script>
5. Date & Object in JavaScript
------------------------------
Date Object:
- Used to handle dates and times.
- Can get and set day, month, year, hours, etc.
Example:
let now = new Date();
console.log(now.getFullYear()); // Outputs current year
Object:
- Used to store keyed collections of various data and complex entities.
Example:
let person = {
name: "Alice",
age: 25,
greet: function() {
return "Hello " + this.name;
};
console.log(person.greet());
6. JavaScript Built-in Objects
------------------------------
- JavaScript comes with many built-in objects for performing common operations.
Common Built-in Objects:
1. String: For text manipulation
Example:
let str = "JavaScript";
console.log(str.toUpperCase()); // "JAVASCRIPT"
2. Number: For working with numbers
Example:
let num = 123.456;
console.log(num.toFixed(2)); // "123.46"
3. Boolean: For true/false logic
Example:
let isActive = new Boolean(true);
4. Array: For storing multiple values
Example:
let fruits = ["Apple", "Banana"];
fruits.push("Mango");
5. Math: For mathematical operations
Example:
console.log(Math.max(5, 10)); // 10
6. Date: For date and time handling
Example:
let today = new Date();
7. RegExp: For pattern matching
Example:
let regex = /abc/;
console.log(regex.test("abcdef")); // true
8. Object: Base object for all objects
Example:
let car = { make: "Toyota", model: "Camry" };
9. JSON: For data serialization and parsing
Example:
let jsonString = JSON.stringify(car);
let obj = JSON.parse(jsonString);
10. Error: For handling exceptions
Example:
try {
throw new Error("Something went wrong");
} catch (e) {
console.log(e.message);
These built-in objects make JavaScript a powerful and versatile programming language for web
development.
