📘 JavaScript — Complete Assignment Answers

Definition

isNaN() stands for "is Not a Number". It is a built-in JavaScript function that checks whether a given value is NaN (Not a Number) or cannot be converted to a number. Returns true if it is NaN, false if it is a valid number.

Syntax

isNaN(value)   // older global function
Number.isNaN(value) // ES6 – stricter version, doesn't coerce

Examples

console.log(isNaN(123));          // false  → 123 is a number
console.log(isNaN("hello"));      // true   → "hello" is not a number
console.log(isNaN("123"));        // false  → "123" converts to 123
console.log(isNaN(NaN));           // true   → NaN itself
console.log(isNaN(undefined));   // true   → undefined → NaN
console.log(isNaN(null));         // false  → null converts to 0
console.log(isNaN(true));         // false  → true converts to 1

// Practical use: validate user input
let age = prompt("Enter your age:");
if (isNaN(age)) {
    alert("Invalid! Please enter a number.");
} else {
    alert("Your age is: " + age);
}

Definition

The === is the strict equality operator (also called the identity operator). It checks both value AND data type without performing any type conversion (coercion). This is different from == which converts types before comparing.

== vs === Comparison

// == (loose equality – type coercion occurs)
console.log(5 == "5");       // true  (converts "5" to 5)
console.log(0 == false);    // true  (false converts to 0)

// === (strict equality – no conversion)
console.log(5 === "5");      // false (number vs string)
console.log(5 === 5);        // true  (same value, same type)
console.log(null === undefined); // false

// Best practice: always use === to avoid bugs
let val = prompt("Enter 5:");  // returns string
console.log(val == 5);   // true  (loose – risky)
console.log(val === 5);  // false (strict – correct)

JavaScript Looping Structures

1. for loop — Used when number of iterations is known.

   for (let i = 0; i < 5; i++) {
       console.log("i = " + i);   // 0 1 2 3 4
   }

2. while loop — Executes while the condition is true (checks condition FIRST).

   let i = 0;
   while (i < 5) {
       console.log(i);
       i++;
   }

3. do...while loop — Executes at least ONCE, then checks condition.

   let i = 0;
   do {
       console.log(i);
       i++;
   } while (i < 5);   // runs min once even if false

4. for...in loop — Iterates over keys of an object.

   let student = { name: "Adii", branch: "ENTC", year: 4 };
   for (let key in student) {
       console.log(key + ": " + student[key]);
   }
   // name: Adii  |  branch: ENTC  |  year: 4

5. for...of loop (ES6) — Iterates over values of iterable (arrays, strings).

   let marks = [88, 92, 76, 95];
   for (let mark of marks) {
       console.log(mark);   // 88 92 76 95
   }
   
   for (let ch of "ENTC") {
       console.log(ch);     // E N T C
   }

Definition

The delete operator is used to remove a property from an object or an element from an array. It returns true on success. After deletion, the property becomes undefined.

Key Points

• Cannot delete variables declared with var, let, or const
• Can delete properties of objects
• Deleting array element leaves a "hole" (length unchanged)
• Returns true even if property doesn't exist

// 1. Deleting object property
let student = { name: "Adii", age: 21, city: "Pune" };
console.log(delete student.city);  // true
console.log(student);               // { name: "Adii", age: 21 }

// 2. Deleting array element (leaves undefined hole)
let arr = [10, 20, 30, 40];
delete arr[2];
console.log(arr);         // [10, 20, undefined, 40]
console.log(arr.length);  // 4 (length UNCHANGED!)

// 3. Cannot delete var/let/const
var x = 100;
console.log(delete x);   // false – cannot delete
console.log(x);           // 100 – still exists

// 4. Can delete global implicit variable
y = 50;  // no let/var
console.log(delete y);  // true

Definition

undefined is a primitive data type in JavaScript. A variable has the value undefined when it has been declared but has not yet been assigned a value. It represents "absence of a value".

Situations where undefined occurs

// 1. Declared but not assigned
let x;
console.log(x);              // undefined

// 2. Function returns nothing
function greet() { console.log("Hi"); }
let result = greet();
console.log(result);         // undefined

// 3. Accessing non-existent object property
let obj = { name: "Adii" };
console.log(obj.age);        // undefined

// 4. Missing function parameter
function add(a, b) { return a + b; }
console.log(add(5));          // NaN (b is undefined)

// 5. Accessing out-of-bounds array index
let arr = [1, 2, 3];
console.log(arr[10]);        // undefined

// Type check
console.log(typeof undefined); // "undefined"

undefined vs null

Group 1: Primitive (Value) Data Types

Stored directly in memory (stack). Passed by value — a copy is made on assignment.

let num  = 42;
let str  = "Hello SPPU";
let bool = true;
let u;                       // undefined
let n    = null;

// Passed by VALUE (copy)
let a = 10, b = a;
b = 99;
console.log(a); // 10 (unchanged)

Group 2: Reference (Non-Primitive) Data Types

Stored in heap memory; variable holds a reference. Passed by reference — both point to same object.

let student = { name: "Adii", branch: "ENTC" };
let arr     = [88, 92, 76];

// Passed by REFERENCE
let s2 = student;
s2.name = "Changed";
console.log(student.name); // "Changed" – same object!

Definition

The typeof operator is a unary operator that returns a string indicating the data type of its operand. It is used for type checking before performing operations on unknown values.

Syntax

typeof value      // without parentheses (preferred)
typeof(value)     // with parentheses (also valid)

typeof Results

console.log(typeof 42);           // "number"
console.log(typeof "SPPU");       // "string"
console.log(typeof true);          // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);          // "object" ← bug
console.log(typeof {});            // "object"
console.log(typeof []);            // "object"
console.log(typeof function(){}); // "function"

// Practical use: type-safe function
function addSafe(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
        return "Error: both must be numbers!";
    }
    return a + b;
}
console.log(addSafe(5, 3));       // 8
console.log(addSafe(5, "hi"));    // Error: both must be numbers!

Type 1: Named Function (Function Declaration)

Defined using the function keyword with a name. Hoisted — can be called before definition.

function add(a, b) {
    return a + b;
}
console.log(add(3, 4));  // 7

Type 2: Anonymous Function (Function Expression)

A function without a name, assigned to a variable. Not hoisted — must be defined before calling.

let multiply = function(a, b) {
    return a * b;
};
console.log(multiply(3, 4));  // 12

Type 3: Arrow Function (ES6)

Shorter syntax using =>. No own this context. Best for callbacks and short expressions.

let subtract = (a, b) => a - b;
console.log(subtract(10, 4));   // 6

// Multi-line arrow function
let power = (base, exp) => {
    let result = 1;
    for (let i = 0; i < exp; i++) result *= base;
    return result;
};
console.log(power(2, 8));  // 256

// Global variable
let globalVar = "I am GLOBAL";

function display() {
    // Local variable
    let localVar = "I am LOCAL";

    console.log(globalVar);  // ✅ Accessible
    console.log(localVar);   // ✅ Accessible
}

display();
console.log(globalVar);  // ✅ Accessible
// console.log(localVar);  ❌ ReferenceError: not accessible

Variable Shadowing

When a local variable and a global variable share the same name, the local variable shadows (masks) the global inside the function. The global variable remains unchanged outside.

This concept is also called Variable Shadowing or Name Masking.

let name = "Global Adii";   // global variable

function display() {
    let name = "Local Adii";  // local – shadows global
    console.log("Inside:", name);  // "Local Adii"
}

display();
console.log("Outside:", name);   // "Global Adii" – unchanged

Accessing global inside function (use window)

var city = "Pune";   // global (var attaches to window)

function test() {
    var city = "Mumbai";  // local shadow
    console.log(city);          // "Mumbai" (local)
    console.log(window.city);   // "Pune" (global via window)
}
test();

The arguments Object

Inside every regular function (not arrow functions), JavaScript provides an arguments object — an array-like object containing all passed parameters. To convert it to a real array, use Array.from() or the spread operator [...arguments].

function showArgs() {
    console.log(arguments);              // Arguments { 0:10, 1:20, 2:30 }
    let arr = Array.from(arguments);     // convert to Array
    console.log(arr);                    // [10, 20, 30]
    return arr;
}
showArgs(10, 20, 30);

// Alternative: spread operator
function sum() {
    let nums = [...arguments];           // spread to array
    return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4, 5));  // 15

// ES6 Rest Parameters (modern way)
function sumRest(...nums) {           // nums is already an array
    return nums.reduce((a, b) => a + b, 0);
}
console.log(sumRest(1, 2, 3));     // 6

Local Variables are Given Preference

When a local and global variable share the same name, local variable is always preferred inside the function. This is governed by JavaScript's Lexical Scoping (also called scope chain resolution).

Scope Chain: JS looks for a variable starting from the innermost scope and moves outward until found.

let x = 100;   // global

function outer() {
    let x = 50;  // local to outer
    
    function inner() {
        let x = 25;  // local to inner – highest preference here
        console.log("inner x:", x);   // 25
    }
    inner();
    console.log("outer x:", x);     // 50
}

outer();
console.log("global x:", x);      // 100

Scope resolution order: Local → Enclosing → Global → Built-in (LEGB rule).

Definition

Masking in JavaScript refers to hiding or overriding a variable in an outer scope by declaring another variable with the same name in an inner scope. The inner variable "masks" (hides) the outer one within that scope.

Masking also commonly refers to hiding sensitive data characters (e.g., masking a password or card number with * symbols).

Variable Masking (Scope Masking)

let score = 90;   // global

function test() {
    let score = 55;  // masks global 'score'
    console.log("Inside:", score);  // 55
}

test();
console.log("Outside:", score);   // 90 – original unchanged

Data Masking (Sensitive Data)

function maskData(str, visible = 4, maskChar = "*") {
    let masked = maskChar.repeat(str.length - visible);
    let shown  = str.slice(-visible);
    return masked + shown;
}
console.log(maskData("9876543210", 4)); // ******3210
console.log(maskData("SecretPass", 1)); // *********s

Method 1: Using slice() + repeat()

function maskExceptLast(str, maskChar = "*", keepLast = 1) {
    if (str.length <= keepLast) return str;
    let maskedPart  = maskChar.repeat(str.length - keepLast);
    let visiblePart = str.slice(-keepLast);
    return maskedPart + visiblePart;
}

console.log(maskExceptLast("Hello"));          // "****o"
console.log(maskExceptLast("9876543210", "X", 4)); // "XXXXXX3210"
console.log(maskExceptLast("MyPassword", "*", 2));  // "********rd"

Method 2: Using Regular Expression

function maskWithRegex(str, maskChar = "*") {
    // .(?=.) → any char that is followed by another char
    return str.replace(/.(?=.)/g, maskChar);
}
console.log(maskWithRegex("HelloWorld"));  // "*********d"
console.log(maskWithRegex("ENTC", "#"));   // "###C"

Method 3: Using split/map/join

function maskSplit(str, keepLast = 1) {
    return str.split("")
              .map((ch, i) => i < str.length - keepLast ? "*" : ch)
              .join("");
}
console.log(maskSplit("Sinhgad", 3));  // "****gad"

Definition

A Regular Expression (RegEx) is a sequence of characters that defines a search pattern. It is used for pattern matching and text processing in strings.

Uses of Regular Expressions

1. Pattern Matching — Check if a string contains a pattern.

   /javascript/i.test("I love JavaScript");  // true

2. Input Validation — Validate email, phone, password format.

   let emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   emailReg.test("user@gmail.com");  // true

3. Search and Replace — Find text and replace it.

   "Hello World".replace(/World/, "JS"); // "Hello JS"

4. Extracting Data — Extract dates, phone numbers, etc.

   "Call 9876543210 now".match(/\d{10}/); // ["9876543210"]

5. Splitting Strings — Split by pattern.

   "one1two2three".split(/\d/);  // ["one","two","three"]

6. Counting Occurrences — Count words, characters.
7. URL/HTML Parsing — Extract or validate URLs, tags.

let str = "Hello World 123";
console.log(/^Hello/.test(str));  // true  – starts with "Hello"
console.log(/123$/.test(str));    // true  – ends with "123"
console.log(/\d+/.test(str));     // true  – has digits
console.log(/^\d+$/.test(str));   // false – not all digits
console.log(/^\d+$/.test("12345")); // true

let html = "<div>Hello</div><div>World</div>";

// Greedy: .* matches as MUCH as possible → from first < to LAST >
let greedy = html.match(/<.*>/);
console.log(greedy[0]);
// "<div>Hello</div><div>World</div>" ← entire string!

// Non-greedy: .*? matches as LITTLE as possible → first tag only
let lazy = html.match(/<.*?>/);
console.log(lazy[0]);
// "<div>" ← first tag only

// Get all tags using non-greedy + global flag
let allTags = html.match(/<.*?>/g);
console.log(allTags);
// ["<div>", "</div>", "<div>", "</div>"]

String Methods that use RegEx

1. test() — RegEx method. Returns true/false.

   /\d+/.test("Age: 21");  // true

2. exec() — RegEx method. Returns match array with index info.

   /(\d+)/.exec("Age: 21");  // ["21", "21", index:5]

3. match() — Returns array of matches.

   "cat bat hat".match(/[bch]at/g);  // ["cat","bat","hat"]

4. matchAll() — Returns iterator of all matches (with capture groups).

   let iter = "test1 test2".matchAll(/test(\d)/g);
   for (let m of iter) console.log(m[0], m[1]);

5. search() — Returns index of first match (or -1).

   "Hello World".search(/World/);  // 6

6. replace() — Replace first (or all with /g) match.

   "cat bat cat".replace(/cat/g, "dog"); // "dog bat dog"

7. replaceAll() — Replace all matches.

   "aaa".replaceAll(/a/g, "b");  // "bbb"

8. split() — Split string by RegEx pattern.

   "one1two2three".split(/\d/);  // ["one","two","three"]

function isFirstUpperCase(str) {
    if (!str || str.trim() === "") {
        return "String is empty";
    }

    // ^ = start of string, [A-Z] = uppercase letter
    let pattern = /^[A-Z]/;

    if (pattern.test(str)) {
        return `"${str}" – First char '${str[0]}' is UPPERCASE ✓`;
    } else {
        return `"${str}" – First char '${str[0]}' is NOT uppercase ✗`;
    }
}

// Test Cases
console.log(isFirstUpperCase("Hello"));      // UPPERCASE ✓
console.log(isFirstUpperCase("hello"));      // NOT uppercase ✗
console.log(isFirstUpperCase("JavaScript")); // UPPERCASE ✓
console.log(isFirstUpperCase("123abc"));     // NOT uppercase ✗
console.log(isFirstUpperCase(""));            // String is empty

function findDates(str) {
    // Patterns for common date formats
    let patterns = [
        /\b(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})\b/g,  // DD/MM/YYYY
        /\b(\d{4})[\/\-](\d{2})[\/\-](\d{2})\b/g         // YYYY-MM-DD
    ];

    let found = [];
    patterns.forEach(p => {
        let matches = str.match(p);
        if (matches) found = found.concat(matches);
    });

    if (found.length > 0) {
        console.log("✅ Dates found:", found.join(", "));
    } else {
        console.log("❌ No date found in string.");
    }
    return found;
}

// Test Cases
findDates("Birthday: 15/08/2002, Exam: 01-06-2025");
// ✅ Dates found: 15/08/2002, 01-06-2025

findDates("Event on 2025-12-25 and also 2026-01-01");
// ✅ Dates found: 2025-12-25, 2026-01-01

findDates("No date here at all");
// ❌ No date found in string.

// Email validation pattern
let emailPattern = /^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/;

/*
Pattern breakdown:
^                    Start of string
[a-zA-Z0-9._%+\-]+  One or more valid chars before @
@                    Literal @ symbol (required)
[a-zA-Z0-9.\-]+     Domain name (letters, digits, dot, hyphen)
\.                   Literal dot (escaped)
[a-zA-Z]{2,}        TLD – min 2 letters (com, in, org, edu)
$                    End of string
*/

function validateEmail(email) {
    if (emailPattern.test(email))
        console.log(`✅ "${email}" is VALID`);
    else
        console.log(`❌ "${email}" is INVALID`);
}

// Test Cases
validateEmail("adii@example.com");        // ✅ VALID
validateEmail("student@sppu.edu.in");     // ✅ VALID
validateEmail("user.name+tag@domain.co"); // ✅ VALID
validateEmail("invalid@");               // ❌ INVALID
validateEmail("@nodomain.com");           // ❌ INVALID
validateEmail("no_at_sign");             // ❌ INVALID
validateEmail("user@domain.c");           // ❌ INVALID (TLD < 2)

// Method 1: split on whitespace
function countWords(str) {
    if (!str || str.trim() === "") {
        console.log("Empty string. Word count: 0");
        return 0;
    }
    // \s+ matches one or more whitespace (handles extra spaces)
    let words = str.trim().split(/\s+/);
    console.log(`String: "${str}"`);
    console.log(`Word Count: ${words.length}`);
    console.log(`Words: [${words.join(", ")}]`);
    return words.length;
}

// Method 2: using match() with word boundary
function countWordsRegex(str) {
    // \b\w+\b → matches whole words
    let matches = str.match(/\b\w+\b/g);
    return matches ? matches.length : 0;
}

// Test Cases
countWords("Hello World");              // 2
countWords("JavaScript is awesome");    // 3
countWords("  Extra   spaces  here  ");  // 3 (extra spaces handled)
countWords("OneWord");                  // 1
countWords("");                         // 0

console.log(countWordsRegex("Count these 5 words here")); // 5

Definition

The Document Object Model (DOM) is a programming interface/API that represents an HTML or XML document as a hierarchical tree structure. Every element, attribute, and text in the HTML page becomes a node in this tree, which JavaScript can access and modify dynamically.

Uses of DOM in JavaScript

1. Accessing Elements — Select HTML elements by ID, class, tag.

   document.getElementById("heading");
   document.querySelector(".myClass");

2. Modifying Content — Change text or HTML of elements.

   document.getElementById("para").innerHTML = "New Content";

3. Changing Styles — Modify CSS dynamically.

   document.getElementById("box").style.color = "red";

4. Adding/Removing Elements — Create or delete HTML nodes.

   let div = document.createElement("div");
   document.body.appendChild(div);

5. Event Handling — Respond to user interactions.
6. Form Validation — Read and validate form inputs before submission.

JavaScript

JavaScript is a lightweight, interpreted, event-driven scripting language used for client-side web development. It makes static HTML pages dynamic and interactive.

How JS Works with DOM

1. Browser parses HTML → builds DOM tree in memory
2. JS accesses DOM through the built-in document object
3. JS reads, modifies, adds, or deletes nodes
4. Changes to DOM automatically update the rendered page

/* DOM Tree for:
   <html>
     <head><title>Page</title></head>
     <body>
       <h1 id="title">Hello</h1>
       <button>Click</button>
     </body>
   </html>

   Document → html → head → title
                   → body → h1#title
                           → button
*/

// JS + DOM interaction
function changeTitle() {
    // 1. Access element
    let h1 = document.getElementById("title");

    // 2. Modify content
    h1.innerHTML = "Changed by JavaScript!";

    // 3. Change style
    h1.style.color = "#7c6ff7";
    h1.style.fontSize = "2rem";
}

// 4. Attach to button
document.querySelector("button")
    .addEventListener("click", changeTitle);

DOM Levels (Specifications)

1. DOM Level 0 (Pre-standard)
   • Basic event handling via inline attributes (onclick, onload)
   • Access via document.forms[], document.images[]
   • Not an official W3C spec — browser-specific
2. DOM Level 1 (W3C 1998)
   • Core: Access elements — getElementById(), getElementsByTagName()
   • HTML: Navigate and modify the document structure
   • Tree structure became standardized
3. DOM Level 2 (W3C 2000)
   • Event model: addEventListener(), removeEventListener()
   • CSS/Style manipulation via element.style
   • DOM Traversal & Range: navigate parent/child/sibling nodes
   • Namespace support
4. DOM Level 3 (W3C 2004)
   • Load & Save, XPath support
   • Keyboard events standardized
   • Methods: document.adoptNode(), document.normalizeDocument()

What is an Event?

An event is an action or occurrence detected by JavaScript — such as a mouse click, key press, page load, form submission, etc. Events make web pages interactive by allowing JavaScript to respond to these actions.

3 Ways to Define Events in HTML DOM

1. Inline HTML attribute (oldest way)

   <button onclick="alert('Clicked!')">Click</button>
   <input type="text" onkeyup="showInput(this.value)">
   <body onload="init()">

2. DOM Event Property

   let btn = document.getElementById("myBtn");
   
   // Only ONE handler per event
   btn.onclick = function() {
       alert("Button clicked!");
   };
   
   // Overwrites previous
   btn.onclick = function() {
       console.log("Second handler – first one lost!");
   };

3. addEventListener() — Recommended (DOM Level 2)

   let btn = document.getElementById("myBtn");
   
   // Multiple handlers for same event
   btn.addEventListener("click", function() {
       console.log("Handler 1");
   });
   btn.addEventListener("click", function() {
       console.log("Handler 2 – both fire!");
   });
   
   // Remove an event listener
   function handler() { console.log("click"); }
   btn.addEventListener("click", handler);
   btn.removeEventListener("click", handler);

Explanation

JavaScript accesses DOM elements and modifies their style property, which maps directly to inline CSS. CSS property names with hyphens are written in camelCase in JavaScript.

// Accessing an element
let elem = document.getElementById("myPara");

// Change text color
elem.style.color = "red";                 // named color
elem.style.color = "#7c6ff7";             // hex code
elem.style.color = "rgb(124, 111, 247)";  // rgb

// Change background color
elem.style.backgroundColor = "yellow";
elem.style.backgroundColor = "#1a1d27";

// CSS property → JS camelCase mapping
// background-color  → backgroundColor
// font-size         → fontSize
// border-radius     → borderRadius

/* Full Example with Button */
function changeColors() {
    let p = document.getElementById("demo");
    p.style.color            = "white";
    p.style.backgroundColor  = "#4ecdc4";
    p.style.padding          = "10px";
    p.style.borderRadius     = "8px";
}

function resetColors() {
    let p = document.getElementById("demo");
    p.style.color           = "";   // empty = remove inline style
    p.style.backgroundColor = "";
}

1. Element Selection Methods

document.getElementById("id")            // single element by ID
document.getElementsByClassName("cls")   // HTMLCollection by class
document.getElementsByTagName("p")       // HTMLCollection by tag
document.querySelector("#id .cls")      // first match (CSS selector)
document.querySelectorAll("p.cls")      // NodeList – all matches

2. Element Creation & Insertion

document.createElement("div")     // create new element
document.createTextNode("text")   // create text node
elem.appendChild(child)            // add at end
elem.insertBefore(newEl, refEl)   // insert before reference
elem.replaceChild(newEl, oldEl)   // replace child
elem.removeChild(child)           // remove child element
elem.remove()                     // remove itself
elem.cloneNode(true)             // clone with children

3. Attribute Methods

elem.getAttribute("href")          // get attribute value
elem.setAttribute("href", "#")     // set attribute
elem.removeAttribute("disabled")  // remove attribute
elem.hasAttribute("class")        // returns true/false

4. Event Methods

elem.addEventListener("click", fn)    // add listener
elem.removeEventListener("click", fn) // remove listener
elem.dispatchEvent(new Event("click")) // trigger event manually

Content Properties

element.innerHTML     // HTML content (read/write)
element.textContent   // plain text content
element.innerText     // visible text (respects CSS display)
element.value         // value of form elements
element.href          // URL for <a> tags
element.src           // source for <img>, <script>

Style / Class Properties

element.style.color        // inline CSS property
element.className           // full class attribute string
element.classList           // DOMTokenList (add/remove/toggle/contains)
element.id                  // element ID
element.tagName             // tag name ("DIV", "P")
element.nodeType            // 1=element, 3=text, 8=comment

Tree Navigation Properties

element.parentNode          // parent node
element.parentElement       // parent element
element.childNodes          // all child nodes (includes text)
element.children            // child elements only
element.firstChild          // first child node
element.lastChild           // last child node
element.nextSibling         // next sibling node
element.previousSibling     // previous sibling node
element.childElementCount   // number of child elements

Document Properties

document.title              // page title
document.URL                // full URL
document.body               // <body> element
document.head               // <head> element
document.forms              // all form elements
document.images             // all images
document.links              // all <a> with href

EventListener Method

The addEventListener() method attaches an event handler to a DOM element without overwriting existing handlers. Multiple listeners can be added for the same event.

Syntax: element.addEventListener(event, function, useCapture)

/* Full Example: Show current date and time */

<!-- HTML -->
<!--
  <p id="datetime">Click to see date/time</p>
  <button id="showBtn">Show Date & Time</button>
  <button id="liveBtn">Live Clock</button>
-->

let btn = document.getElementById("showBtn");

// One-time click listener
btn.addEventListener("click", function() {
    let now = new Date();

    let date = now.toLocaleDateString("en-IN", {
        day:   "2-digit",
        month: "long",
        year:  "numeric"
    });

    let time = now.toLocaleTimeString("en-IN");

    document.getElementById("datetime").innerHTML =
        `📅 Date: ${date}<br>🕐 Time: ${time}`;
});

// Live clock – updates every second
let liveBtn = document.getElementById("liveBtn");
let clockInterval = null;

liveBtn.addEventListener("click", function() {
    if (clockInterval) { clearInterval(clockInterval); clockInterval = null; return; }
    clockInterval = setInterval(function() {
        document.getElementById("datetime").textContent =
            new Date().toLocaleString("en-IN");
    }, 1000);
});

Definition

A frame in JavaScript refers to a section of the browser window that displays a separate HTML document. Historically, frames were created using <frameset> and <frame> tags (deprecated in HTML5). Today, <iframe> (inline frame) is the modern equivalent.

The window.frames property provides access to all frames (iframes) within the current window.

<!-- Modern: iframe element -->
<iframe id="myFrame" src="page.html" width="600" height="400"></iframe>

// Accessing frames in JavaScript
console.log(window.frames.length);      // number of iframes

// Access first iframe's window
let frameWin = window.frames[0];

// Access by id via contentWindow
let frame = document.getElementById("myFrame");
let frameDoc = frame.contentDocument;   // DOM of iframe content
let frameWin2 = frame.contentWindow;    // window object of iframe

// Call function inside iframe
frame.contentWindow.someFunction();

// Access parent from inside iframe
// window.parent → parent window
// window.top → topmost window

Definition

The window object is the global object in browser-based JavaScript and the top-level object of the Browser Object Model (BOM). It represents the browser window. All global variables and functions automatically become properties of the window object.

Key window Properties & Methods

// Properties
window.innerWidth;        // browser viewport width
window.innerHeight;       // browser viewport height
window.location.href;     // current URL
window.location.hostname; // domain name
window.navigator.userAgent; // browser info
window.history.length;    // # of pages in history
window.screen.width;      // full screen width
window.document;          // the HTML DOM

// Dialog Methods (window. can be omitted)
window.alert("Message!");              // alert box
let ok = window.confirm("Sure?");       // true/false
let val = window.prompt("Enter:", "");  // user input

// Timer Methods
let t1 = window.setTimeout(function() {
    console.log("After 2s");
}, 2000);

let t2 = window.setInterval(function() {
    console.log("Every 1s");
}, 1000);

window.clearTimeout(t1);   // stop setTimeout
window.clearInterval(t2);  // stop setInterval

// Navigation Methods
window.open("https://sppu.ac.in", "_blank"); // open tab
window.close();                                 // close window
window.scrollTo(0, 0);                        // scroll to top
window.history.back();                          // go back
window.location.reload();                       // reload page

// window – browser level
console.log(window.innerWidth);       // 1920 (screen width)
console.log(window.location.href);    // "https://..."
window.setInterval(() => {}, 1000);

// document – page level
console.log(document.title);          // "My Page"
document.getElementById("box").style.color = "red";

// Relationship
console.log(window.document === document); // true!

Answer: No — window is NOT part of core JavaScript

The window object is provided by the browser (host environment), not by the JavaScript language (ECMAScript) itself. It is part of the Browser Object Model (BOM).

• In Browsers — window is the global object; all globals attach to it.
• In Node.js — There is NO window object; the global object is global.
• In Web Workers — The global is self, not window.

// In browser: globals become window properties
var x = 42;
console.log(window.x); // 42

function greet() { return "Hi!"; }
console.log(window.greet()); // "Hi!"

// window. prefix is optional in browsers
alert("same as window.alert()");
document.write("same as window.document.write()");

// Detect environment
if (typeof window !== "undefined") {
    console.log("Running in BROWSER");
} else {
    console.log("Running in NODE.JS or other env");
}

Most Useful Events for Form Validation

// onsubmit – main validation event
function validateForm() {
    let name = document.getElementById("name").value;
    if (name.trim() === "") {
        alert("Name is required!");
        return false;   // PREVENTS form submission
    }
    return true;       // ALLOWS form submission
}
// <form onsubmit="return validateForm()">

// oninput – real-time email validation
document.getElementById("email").addEventListener("input", function() {
    let valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value);
    this.style.borderColor = valid ? "green" : "red";
});

3 Main Types of Validation

1. Client-Side Validation (Browser/JavaScript)
   • Runs in the browser before data is sent to server
   • Fast, immediate user feedback
   • Can be disabled/bypassed (not 100% secure)
2. Server-Side Validation (Backend)
   • Runs on the web server after form submission
   • More secure — cannot be bypassed by user
   • Slower (requires network round-trip)
   • Always needed as final security layer
3. HTML5 Built-in Validation
   • Uses HTML5 attributes, handled by browser natively
   • No JavaScript required

   <input type="email" required minlength="5" maxlength="50">
   <input type="number" min="1" max="100">
   <input type="text" pattern="[A-Za-z]{3,}">

Sub-Types within Client-Side Validation

• Required Field Validation
• Data Type Validation (isNaN, typeof)
• Format Validation (RegEx for email, phone)
• Range Validation (min/max values)
• Comparison Validation (password match)
• Length Validation (min/max length)

Steps in Form Handling

1. Collect data from form fields
2. Validate the collected data
3. Process / display / submit the data

<!-- HTML -->
<!--
<form id="myForm" onsubmit="return handleForm()">
  <input type="text" id="name" placeholder="Your name">
  <input type="email" id="email" placeholder="Your email">
  <input type="number" id="age" placeholder="Your age">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>
<div id="output"></div>
-->

function handleForm() {
    // Step 1: Collect data
    let name  = document.getElementById("name").value.trim();
    let email = document.getElementById("email").value.trim();
    let age   = parseInt(document.getElementById("age").value);

    // Step 2: Validate
    if (name === "") { alert("Name required!"); return false; }

    let emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailReg.test(email)) { alert("Invalid email!"); return false; }

    if (isNaN(age) || age < 18 || age > 100) {
        alert("Age must be 18–100!"); return false;
    }

    // Step 3: Process – display output
    document.getElementById("output").innerHTML = `
        <h3>✅ Form Submitted!</h3>
        <p>Name:  ${name}</p>
        <p>Email: ${email}</p>
        <p>Age:   ${age}</p>`;

    return false; // prevent actual browser submit for demo
}

Definition

onsubmit is a JavaScript event that fires when the user submits an HTML form — either by clicking the submit button or pressing Enter in a text field. It is the primary event used for form validation before data is sent to the server.

Key Rules

• Return false → Prevents form submission (validation failed)
• Return true or nothing → Allows form submission
• event.preventDefault() also prevents submission (with addEventListener)

// Method 1: Inline onsubmit
// <form onsubmit="return validateForm()">

// Method 2: addEventListener (preferred)
document.getElementById("myForm")
    .addEventListener("submit", function(event) {

        event.preventDefault();  // stop browser submission

        let name = document.getElementById("name").value;

        if (name.trim() === "") {
            alert("Name is required!");
            return;  // stop here
        }

        // Validation passed – submit programmatically
        console.log("Form is valid! Submitting...");
        // this.submit();
    });

1. Required Field Validation — Fields cannot be empty.

   if (document.getElementById("name").value === "")
       { alert("Name required!"); return false; }

2. Data Type Validation — Value is correct type.

   if (isNaN(document.getElementById("age").value))
       { alert("Age must be a number!"); return false; }

3. Format Validation — RegEx checks (email, phone, date).

   if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
       { alert("Invalid email!"); return false; }

4. Range Validation — Value within min/max.

   if (age < 18 || age > 100)
       { alert("Age: 18–100"); return false; }

5. Comparison Validation — Two fields must match.

   if (pass !== confirmPass)
       { alert("Passwords don't match!"); return false; }

6. Length Validation — Min/max character length.

   if (name.length < 3 || name.length > 50)
       { alert("Name: 3-50 chars"); return false; }

The 3 Primary Types

1. Client-Side Validation
   • Done in browser using JavaScript before form is submitted
   • Fast, instant feedback to user; no server round-trip needed
   • Can be bypassed — NOT sufficient alone for security

   function validate() {
       if (field.value === "") { alert("Required"); return false; }
       return true;
   }

2. Server-Side Validation
   • Done on the web server after form data is received
   • Cannot be bypassed — most secure method
   • Requires network round-trip (slower)
   • Always necessary alongside client-side validation
3. HTML5 Native/Built-in Validation
   • Uses HTML attributes — browser handles validation automatically
   • No JavaScript code required
   • Limited customization of error messages

   <input type="email" required>
   <input type="number" min="18" max="100">
   <input type="text" pattern="[A-Za-z]{3,}" required>
   <input type="password" minlength="8">

Complete Form Validation Example

/* HTML Structure:
<form id="regForm" onsubmit="return validateAll()">
  <input type="text"     id="fname"  placeholder="Full Name">
  <span id="nameErr"></span>
  <input type="email"    id="email"  placeholder="Email">
  <span id="emailErr"></span>
  <input type="password" id="pass"   placeholder="Password">
  <input type="password" id="cpass"  placeholder="Confirm">
  <span id="passErr"></span>
  <input type="number"   id="age"    placeholder="Age">
  <span id="ageErr"></span>
  <button type="submit">Register</button>
</form>
*/

function setError(id, msg) {
    document.getElementById(id).textContent = msg;
    document.getElementById(id).style.color = "red";
}
function clearError(id) {
    document.getElementById(id).textContent = "";
}

function validateAll() {
    let isValid = true;

    // 1. Name validation
    let name = document.getElementById("fname").value.trim();
    if (name.length < 3) {
        setError("nameErr", "Name must be at least 3 characters");
        isValid = false;
    } else clearError("nameErr");

    // 2. Email validation
    let email = document.getElementById("email").value;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        setError("emailErr", "Enter a valid email address");
        isValid = false;
    } else clearError("emailErr");

    // 3. Password match validation
    let pass  = document.getElementById("pass").value;
    let cpass = document.getElementById("cpass").value;
    if (pass === "" || pass.length < 6) {
        setError("passErr", "Password must be at least 6 characters");
        isValid = false;
    } else if (pass !== cpass) {
        setError("passErr", "Passwords do not match!");
        isValid = false;
    } else clearError("passErr");

    // 4. Age range validation
    let age = parseInt(document.getElementById("age").value);
    if (isNaN(age) || age < 18 || age > 100) {
        setError("ageErr", "Age must be between 18 and 100");
        isValid = false;
    } else clearError("ageErr");

    // Only submit if ALL validations passed
    if (isValid) {
        alert("✅ Registration Successful!");
    }
    return isValid;  // false = stop submission, true = allow
}