DEV Community: Kesavarthini

Playwright Basics: Text Validation, Login Testing, Checkboxes, and Radio Buttons

Kesavarthini — Mon, 11 May 2026 13:36:11 +0000

Playwright

Playwright is a modern automation testing framework used for end-to-end testing of web applications. It supports multiple browsers such as Chrome, Firefox, and Safari and is widely used for UI automation testing.
Developed by Microsoft.

Why Learn Playwright?

Playwright is popular because it provides:

Fast execution
Auto waiting
Cross-browser support
Easy syntax
Powerful assertions
Modern testing features

It is commonly used for:

UI Testing
Functional Testing
End-to-End Testing
Regression Testing

Basic Structure of a Playwright Test

import { test, expect } from '@playwright/test'

test('sample test', async ({ page }) => {

    await page.goto('https://example.com');

})

Understanding the Basics

Keyword and Purpose

test() => Creates a test case
expect() => Used for assertions
page => Represents browser tab
goto() => Opens a webpage
locator() => Finds web elements

1. Text Validation in Playwright

This example validates whether the webpage contains the correct text.


import { test, expect } from '@playwright/test'
// expect => Assertions

test("text-validation", async ({ page }) => {

    await page.goto("https://mytestpages.netlify.app/textValidation");

    const main = page.locator('#main-title');
    const desc = page.locator('#description');

    // Assertions
    await expect(main)
      .toHaveText('Welcome to Playwright Practice');

    await expect(desc)
      .toContainText('This is a sample page for testing static text.');

})

Explanation
Opening the Webpage

await page.goto("https://mytestpages.netlify.app/textValidation");

This command opens the specified webpage.

Locators

const main = page.locator('#main-title');

Locators identify elements on the webpage.

Here:

#main-title → ID selector
#description → ID selector

Assertions
toHaveText()

await expect(main)
.toHaveText('Welcome to Playwright Practice');

Checks exact text.

toContainText()

await expect(desc)
.toContainText('This is a sample page for testing static text.');

Checks partial text.

Difference Between Assertions
Assertion and Purpose
toHaveText() => Exact text validation
toContainText() => Partial text validation

2. Button Click Text Change Validation

This example validates text changes after clicking a button.

import { test, expect } from '@playwright/test'

test('button click text change', async ({ page }) => {

    await page.goto("https://mytestpages.netlify.app/button-intraction");

    const para = page.locator('#message');
    const btn = page.locator('#changeTextButton');

    await btn.click();

    await expect(para)
      .toHaveText('The text has changed after the button click!');

})

Explanation
Click Action

await btn.click();

This simulates a user clicking the button.

Text Validation After Click

await expect(para)
.toHaveText('The text has changed after the button click!');

Validates that the paragraph text changed after button interaction.

3. Login Validation in Playwright
This example covers:

Filling input fields
Clearing fields
Invalid login validation
Successful login validation

import { test, expect } from '@playwright/test'

test("login validation", async ({ page }) => {

    await page.goto("https://mytestpages.netlify.app/login");

    const uName = page.locator('#username');
    const pwd = page.locator('#password');
    const btn = page.locator('button:has-text("Login")');

    await uName.fill("admin");

    await expect(uName).toHaveValue('admin');

    await uName.clear();

    await expect(uName).toHaveValue('');

    await uName.fill('admin');

    await pwd.fill('123');

    await btn.click();

    const errormsg = page.locator('#error-message');

    await expect(errormsg)
      .toHaveText('Invalid username or password.');

    await pwd.fill('1234');

    await btn.click();

    const dashboard = page.locator('#dashboard');

    await expect(dashboard)
      .toContainText('dashboard');

})

Explanation
Fill Input Fields

await uName.fill("admin");

Enters text inside the input field.

Validate Input Value

await expect(uName).toHaveValue('admin');

Checks whether the entered value exists in the textbox.

Clear Input Field

await uName.clear();

Removes existing text from the field.

Button Locator

const btn = page.locator('button:has-text("Login")');

Finds button using visible text.

Error Message Validation

await expect(errormsg)
.toHaveText('Invalid username or password.');

Checks whether incorrect login shows error message.

Successful Login Validation

await expect(dashboard)
.toContainText('dashboard');

Validates successful login.

4. Checkbox Handling in Playwright

Checkboxes are commonly used in forms and settings pages.

This example demonstrates:

Selecting checkbox
Unselecting checkbox
Disabled checkbox validation
Check all functionality

import { test, expect } from '@playwright/test'

test.describe("checkbox handling page", () => {

    test.beforeEach(async ({ page }) => {

        await page.goto('https://mytestpages.netlify.app/checkbox-handling');

    })

    test('single checkbox select/unselect', async ({ page }) => {

        const checkbox1 = page.locator('#checkbox1');

        // check
        await checkbox1.check();

        await expect(checkbox1).toBeChecked();

        // unCheck
        await checkbox1.uncheck();

        await expect(checkbox1).not.toBeChecked();

    })

    test('pre-checked checkbox validation', async ({ page }) => {

        const checkbox2 = page.locator('#checkbox2');

        await expect(checkbox2).toBeChecked();

        await checkbox2.uncheck();

        await expect(checkbox2).not.toBeChecked();

    })

    test('Disabled button validation', async ({ page }) => {

        const checkbox4 = page.locator('#checkbox4');

        await expect(checkbox4).toBeDisabled();

    })

    test('check all buttons', async ({ page }) => {

        const checkallBtn = page.locator('#checkAllButton');

        const checkboxes = page.locator(
          'input[type = "checkbox"]:not([disabled])'
        );

        await checkallBtn.click();

        const count = await checkboxes.count();

        for (let i = 0; i < count; i++) {

            await expect(checkboxes.nth(i)).toBeChecked();

        }

    })

})

Explanation
test.describe()

test.describe("checkbox handling page", () => {})

Used to group related test cases.

beforeEach()

test.beforeEach(async ({ page }) => {})

Runs before every test case.

Checkbox Selection

await checkbox1.check();

Checks the checkbox.

Checkbox Validation

await expect(checkbox1).toBeChecked();

Validates checkbox selection.

Disabled Element Validation

await expect(checkbox4).toBeDisabled();

Checks whether element is disabled.

Loop Through Multiple Checkboxes

for (let i = 0; i < count; i++)

Used to validate all checkboxes dynamically.

5. Radio Button Handling

Radio buttons allow selecting one option from multiple choices.

import { test, expect } from '@playwright/test'

test.describe('radio button handling', () => {

    test.beforeEach(async ({ page }) => {

        await page.goto("https://mytestpages.netlify.app/radio-selection");

    })

    test('Default selections should be correct', async ({ page }) => {

        const male = page.locator('#gender-male');

        const credit = page.locator('#payment-credit');

        await expect(male).toBeChecked();

        await expect(credit).toBeChecked();

    })

    test('select female and paypal and verify result',
    async ({ page }) => {

        await page.locator("#gender-female").check();

        await page.locator("#payment-paypal").check();

        await page.locator("#verifyButton").click();

        await expect(page.locator("#result"))
          .toHaveText(
           'Selected gender: Female. Selected payment: PayPal.'
          );

    })

})

Explanation
Default Selection Validation

await expect(male).toBeChecked();

Checks whether the radio button is already selected.

Selecting Radio Buttons

await page.locator("#gender-female").check();

Selects the Female option.

Verify Result Text

await expect(page.locator("#result"))
.toHaveText('Selected gender: Female. Selected payment: PayPal.');

Validates final output text.

Important Assertions in Playwright
Assertion and Purpose

toHaveText() => Exact text match
toContainText() => Partial text match
toHaveValue() => Validate input value
toBeChecked() => Checkbox/Radio validation
toBeDisabled() => Disabled element validation

Commonly Used Playwright Actions
Action and Purpose
click() => Click element
fill() => Enter text
clear() => Clear input
check() => Select checkbox/radio
uncheck() =>Unselect checkbox\

Why Playwright is Powerful

Playwright provides:

Auto waiting
Fast execution
Parallel testing
Cross-browser testing
Built-in assertions
Easy debugging

Array Methods Easy Programs

Kesavarthini — Sat, 18 Apr 2026 14:01:04 +0000

1. Double Each Number
Problem:
[1, 2, 3]
Goal:
[2, 4, 6]
Solution:

let arr = [1, 2, 3];

let result = arr.map(num => num * 2);

console.log(result);

2. Get Even Numbers
Problem:
[1,2,3,4,5]
Goal:
[2,4]
Solution:

let arr = [1,2,3,4,5];

let result = arr.filter(num => num % 2 === 0);

console.log(result);

Think: “I want only some values” → use filter()

3. Sum of Numbers
Problem:
[1,2,3,4]
Goal:
10
Solution:

let arr = [1,2,3,4];

let sum = arr.reduce((acc, num) => acc + num, 0);

console.log(sum);

Think: “I want one final value” → use reduce()

4. Convert Numbers to Strings
Problem:
[1, 2, 3]
Goal:
["1", "2", "3"]
Solution:

let arr = [1,2,3];

let result = arr.map(num => num.toString());

console.log(result);

5. Find First Even Number
Problem:
[1,3,5,6,7]
Goal:
6
Solution:

let arr = [1,3,5,6,7];

let result = arr.find(num => num % 2 === 0);

console.log(result);

find() → returns first match

6. Check if All Numbers are Positive

let arr = [1,2,3];

let result = arr.every(num => num > 0);

console.log(result); // true

7. Check if Any Number is Negative

let arr = [1,2,-3];

let result = arr.some(num => num < 0);

console.log(result); // true

8. Square Only Even Numbers
Input:
[1,2,3,4]
Output:
[4,16]
Solution:

let arr = [1,2,3,4];

let result = arr
    .filter(num => num % 2 === 0)
    .map(num => num * num);

console.log(result);

Step 1: filter → Step 2: map

9. Count Numbers Greater Than 10

let arr = [5, 15, 20, 8];

let count = arr.filter(num => num > 10).length;

console.log(count); // 2

MCQs on Array Methods

Kesavarthini — Sat, 18 Apr 2026 13:42:00 +0000

1. What is the output?

[1, 2, 3].forEach(num => num * 2);

Options:
A) [2, 4, 6]
B) undefined
C) [1, 2, 3]
D) Error

✅ Answer: B) undefined

Explanation:
forEach() does NOT return anything → returns undefined

2. What is the output?

let result = [1, 2, 3].map(num => {
    if (num > 1) return num * 2;
});

console.log(result);

Options:
A) [2, 4, 6]
B) [undefined, 4, 6]
C) [4, 6]
D) Error

✅ Answer: B) [undefined, 4, 6]

Explanation:
map() always returns same length
For num = 1, nothing returned → undefined

3. What is the output?

let arr = [1, 2, 3];
let result = arr.filter(num => num > 5);

console.log(result);

Options:
A) [undefined]
B) []
C) null
D) Error

✅ Answer: B) []

Explanation:
No elements match → empty array

4. What is the output?

let result = [1, 2, 3].reduce((acc, val) => acc + val);
console.log(result);

Options:
A) 6
B) 0
C) undefined
D) Error

✅ Answer: A) 6

Explanation:
Default acc = first element = 1
→ 1+2=3 → 3+3=6

5. What is the output?

let arr = [1, 2, 3];

let result = arr.some(num => num > 2);

console.log(result);

Options:
A) true
B) false

✅ Answer: A) true

One element (3) satisfies condition

6. What is the output?

let arr = [2, 4, 6];

let result = arr.every(num => num % 2 === 0);

console.log(result);

Options:
A) true
B) false

✅ Answer: A) true

All elements satisfy condition

7. What is the output?

let arr = [1, 2, 3];

arr.map(num => num * 2);
console.log(arr);

Options:
A) [2, 4, 6]
B) [1, 2, 3]
C) undefined
D) Error

✅ Answer: B) [1, 2, 3]

map() does NOT modify original array

8. What is the output?

let arr = [1, 2, 3];

arr.forEach(num => num * 2);
console.log(arr);

Options:
A) [2, 4, 6]
B) [1, 2, 3]

✅ Answer: B) [1, 2, 3]
forEach doesn’t change array unless you modify directly

9. What is the output?

let arr = [1, [2, 3]];

console.log(arr.flat());

Options:
A) [1, 2, 3]
B) [1, [2,3]]

✅ Answer: A) [1, 2, 3]

10. What is the output?

let arr = [1, 2, 3];

let result = arr.reduce((acc, val) => acc + val, 5);

console.log(result);

Options:
A) 6
B) 11
C) 10

✅ Answer: B) 11

5 + 1 + 2 + 3 = 11

11. What is the output?

console.log([..."hello"]);

Options:
A) "hello"
B) ["h","e","l","l","o"]

✅ Answer: B

12. What is the output?

let arr = [10, 20, 30];

console.log(arr.at(-1));

Options:
A) 10
B) 30
C) undefined

✅ Answer: B) 30

Array Iteration Methods

Kesavarthini — Fri, 17 Apr 2026 14:14:43 +0000

Array Iteration Methods in JavaScript
1. forEach()

Executes a function for each element
Does NOT return a new array

let arr = [1, 2, 3];

arr.forEach(function(num) {
    console.log(num * 2);
});

Output:

2 4 6

Use when you just want to print / perform action

2. map()
Transforms array and returns new array

let arr = [1, 2, 3];

let result = arr.map(num => num * 2);

console.log(result); // [2, 4, 6]

✔ Use when you want to modify values

3. flatMap()

Combines map() + flat()

let arr = [1, 2, 3];

let result = arr.flatMap(num => [num, num * 2]);

console.log(result); // [1,2,2,4,3,6]

✔ Use when returning arrays inside map

4. filter()

Returns elements that match condition

let arr = [1, 2, 3, 4];

let result = arr.filter(num => num % 2 === 0);

console.log(result); // [2, 4]

✔ Use for selection

5. reduce()(To be discussed)
Reduces array to single value

let arr = [1, 2, 3, 4];

let sum = arr.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

✔ Use for sum, product, etc.

6. reduceRight()(To be discussed)
Same as reduce but from right → left

let arr = ["a", "b", "c"];

let result = arr.reduceRight((acc, val) => acc + val);

console.log(result); // "cba"

7. every()
Checks if ALL elements satisfy condition

let arr = [2, 4, 6];

let result = arr.every(num => num % 2 === 0);

console.log(result); // true

8. some()
Checks if ANY element satisfies condition

let arr = [1, 3, 4];

let result = arr.some(num => num % 2 === 0);

console.log(result); // true

9. Array.from()
Converts iterable → array

let str = "hello";

let arr = Array.from(str);

console.log(arr); // ["h","e","l","l","o"]

10. keys()(To be discussed)
Returns index iterator

let arr = ["a", "b"];

for (let key of arr.keys()) {
    console.log(key);
}

Output:

0 1

11. entries()
Returns index + value

let arr = ["a", "b"];

for (let [index, value] of arr.entries()) {
    console.log(index, value);
}

Output:

0 a
1 b

12. with()
Returns new array with replaced value

let arr = [1, 2, 3];

let newArr = arr.with(1, 100);

console.log(newArr); // [1,100,3]

✔ Does NOT modify original

13. Spread Operator(To be discussed)
Expands array

let arr1 = [1, 2];
let arr2 = [3, 4];

let result = [...arr1, ...arr2];

console.log(result); // [1,2,3,4]

✔ Used for copying, merging

14. Rest Operator ...(To be discussed)
Collects values into array

function sum(...nums) {
    return nums.reduce((a, b) => a + b);
}

console.log(sum(1, 2, 3)); // 6

Callback Function in JS

Kesavarthini — Wed, 15 Apr 2026 15:34:43 +0000

What is a Callback Function?

A callback function is a function that is passed as an argument to another function and is executed later.

Simple Definition
“A function inside another function”

Callback Function – Real-Life Examples
1. Washing Clothes

function washClothes(callback) {
    console.log("Clothes are washed");
    callback();
}

function dryClothes() {
    console.log("Clothes are drying");
}

washClothes(dryClothes);

Explanation:
First → clothes are washed
Then → drying happens

Output:

Clothes are washed
Clothes are drying

2. Cooking Food

function cookFood(callback) {
    console.log("Cooking food...");
    callback();
}

function serveFood() {
    console.log("Food is served");
}

cookFood(serveFood);

First cooking → then serving

3. Mobile Charging

function chargePhone(callback) {
    console.log("Phone is charging...");
    callback();
}

function usePhone() {
    console.log("Now you can use the phone");
}

chargePhone(usePhone);

First charge → then use

4. Studying

function study(callback) {
    console.log("Studying...");
    callback();
}

function takeTest() {
    console.log("Taking test");
}

study(takeTest);

First study → then test

5. Login System

function login(callback) {
    console.log("User logged in");
    callback();
}

function showDashboard() {
    console.log("Welcome to dashboard");
}

login(showDashboard);

First login → then dashboard

Arrays in JS

Kesavarthini — Wed, 15 Apr 2026 13:53:18 +0000

What is an Array?

An Array is an object type designed for storing data collections.

Key characteristics of JavaScript arrays are:

Elements: An array is a list of values, known as elements.

Ordered: Array elements are ordered based on their index.

Zero indexed: The first element is at index 0, the second at index 1, and so on.

Dynamic size: Arrays can grow or shrink as elements are added or removed.

Heterogeneous: Arrays can store elements of different data types (numbers, strings, objects and other arrays).

Declaring an Array
1. Array Literal (Most Used)

let arr = [1, 2, 3, 4];

2. Using Constructor

let arr = new Array(1, 2, 3);

Accessing Elements

let arr = [10, 20, 30];

console.log(arr[0]); // 10
console.log(arr[1]); // 20

Use index number to access

Basic Array Methods
1. length
Returns number of elements

let arr = [1, 2, 3];
console.log(arr.length); // 3

2. toString()
Converts array to string

let arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"

3. at()(To be discussed)
Access element using index (supports negative index)

let arr = [10, 20, 30];
console.log(arr.at(-1)); // 30

4. join()
Joins elements with separator

let arr = [1, 2, 3];
console.log(arr.join("-")); // "1-2-3"

5. pop()
Removes last element

let arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1,2]

6. push()
Adds element at end

arr.push(4);

7. shift()
Removes first element

arr.shift();

8. unshift()
Adds element at beginning

arr.unshift(0);

9. Array.isArray()
Checks if variable is array

Array.isArray(arr); // true

10. delete
Removes element but leaves empty slot ⚠️

let arr = [1, 2, 3];
delete arr[1];

console.log(arr); // [1, empty, 3]

❌ Not recommended

11. concat()
Merges arrays

let a = [1, 2];
let b = [3, 4];

let c = a.concat(b);
console.log(c); // [1,2,3,4]

12. copyWithin()
Copies part of array to another position

let arr = [1, 2, 3, 4];
arr.copyWithin(0, 2);

console.log(arr); // [3,4,3,4]

13. flat()
Flattens nested arrays

let arr = [1, [2, 3]];
console.log(arr.flat()); // [1,2,3]

14. slice()
Extracts part of array (no change to original)

let arr = [1, 2, 3, 4];
let result = arr.slice(1, 3);

console.log(result); // [2,3]

15. splice()
Adds/removes elements (modifies original)

let arr = [1, 2, 3];
arr.splice(1, 1);

console.log(arr); // [1,3]

Add elements:

arr.splice(1, 0, 5);

16. toSpliced()
Same as splice but does NOT modify original

let arr = [1, 2, 3];

let newArr = arr.toSpliced(1, 1);

console.log(newArr); // [1,3]
console.log(arr);    // [1,2,3]

Functions in JS

Kesavarthini — Thu, 09 Apr 2026 09:37:42 +0000

What is a Function?

A function in JavaScript is a reusable block of code designed to perform a specific task. Functions are executed when they are called or invoked
Instead of writing the same code multiple times, we can define it once and reuse it.

Why Use Functions?

✅ Code reusability
✅ Better readability
✅ Easy debugging
✅ Modular programming

Basic Syntax

function functionName(parameters) {
    // code
    return value;
}

Example

function greet(name) {
    return "Hello " + name;
}

console.log(greet("Akalya"));

Output:

Hello Akalya

Types of Functions in JavaScript

1. Function Declaration

function add(a, b) {
    return a + b;
}

✔️ Can be called before declaration (hoisting)

2. Function Expression

const add = function(a, b) {
    return a + b;
};

A function expression is a function stored in a variable
The variable name can be used to call the function
Cannot be called before declaration

3. Arrow Function (ES6)

const add = (a, b) => a + b;

Arrow Functions is a short syntax for function expressions
You can skip the function keyword
You can skip the return keyword
You can skip the curly brackets

4.Anonymous Function(Need to be discussed)

setTimeout(function() {
    console.log("Hello");
}, 1000);

Function without a name

5. Immediately Invoked Function (IIFE)(Need to be discussed)

(function() {
    console.log("Runs immediately");
})();

Executes as soon as it is defined

Parameters vs Arguments

function add(a, b) {   // parameters
    return a + b;
}

add(2, 3);             // arguments

Function Parameters

Parameters allow you to send values to a function
Parameters are listed in parentheses in the function definition

Function Arguments

Function parameters and arguments are distinct concepts
Parameters are the names listed in the function definition
Arguments are the values received by the function

Return Statement

Used to send value back from function
Stops execution after returning

function square(n) {
    return n * n;
}

Default Parameters

function greet(name = "Guest") {
    return "Hello " + name;
}

Function Scope

Variables inside function → local scope
Variables outside → global scope

let x = 10;

function test() {
    let y = 20;
    console.log(x); // accessible
}

Callback Functions(Need to be discussed)

Function passed as argument to another function

function greet(name, callback) {
    console.log("Hi " + name);
    callback();
}

function sayBye() {
    console.log("Bye!");
}

greet("Akalya", sayBye);

Higher Order Functions(Need to be discussed)

Functions that:

Take another function as argument OR
Return a function

Example: map(), filter()

Looping Programs

Kesavarthini — Mon, 06 Apr 2026 14:21:18 +0000

1) Prime Number
i)Finding whether the given number is prime or not:

let num = 7;
let isPrime = true;

for (let i = 2; i < num; i++) {
    if (num % i === 0) {
        isPrime = false;
        break;
    }
}

if (num > 1 && isPrime) {
    console.log("Prime");
} else {
    console.log("Not Prime");
}

Output:

Prime

ii)Printing all the prime numbers within the 2-50:

for (let num = 2; num <= 50; num++) {

    let isPrime = true;

    for (let i = 2; i < num; i++) {
        if (num % i === 0) {
            isPrime = false;
            break;
        }
    }

    if (isPrime) {
        console.log(num);
    }
}

Output:

2) Reverse Printing a Number

        let num=1234;
        let reverse=0;
        while(num>0){
            let digit=num%10;
            reverse=reverse*10+digit;
            num=Math.floor(num/10);
        }
        document.write("Reverse: "+reverse);

Output:

Reverse: 4321

3) Count of Digits

        let num=1234;
        let count=0;
        while(num>0){
            let digit=num%10;
            num=Math.floor(num/10);
            count++;
        }
        document.write("Count of digits: "+count);

Output:

Count of digits: 4

4) Sum of Digits

let num = 123;
let sum = 0;

while (num > 0) {
    let digit = num % 10;
    sum += digit;
    num = Math.floor(num / 10);
}

console.log("Sum:", sum);

Output:

5) Palindrome

let num = 121;
let temp = num;
let reverse = 0;

while (num > 0) {
    let digit = num % 10;
    reverse = reverse * 10 + digit;
    num = Math.floor(num / 10);
}

if (temp === reverse) {
    console.log("Palindrome");
} else {
    console.log("Not Palindrome");
}

Output:

Palindrome

6) Swapping two numbers

let a = 5;
let b = 10;

let temp = a;  // store a
a = b;         // assign b to a
b = temp;      // assign temp to b

console.log("a =", a);
console.log("b =", b);

Output:

a = 10
b = 5

7) Swapping without third variable

let a = 5;
let b = 10;

a = a + b; // 15
b = a - b; // 5
a = a - b; // 10

console.log("a =", a);
console.log("b =", b);

Output:

a = 10
b = 5

Looping Statements in JS

Kesavarthini — Mon, 06 Apr 2026 12:53:17 +0000

Looping Statements in JavaScript

Looping statements in JavaScript are used to repeat a block of code multiple times until a condition becomes false.
Instead of writing the same code again and again, loops help make the code shorter and easier to manage.

JavaScript mainly provides the following loops:

1) for Loop

The for loop is used when we know how many times the loop should run.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Output:

Here, the loop starts from 1 and runs until 5.

2) while Loop

The while loop runs as long as the given condition is true.

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

This also prints numbers from 1 to 5.

3) DO...WHILE LOOP

Similar to while, but runs at least once (even if condition is false)

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

Output:

Code must run at least once in do-while loop

Example Programs:
Looping Programs in JavaScript

1) 1 1 1 1 1
Print the number 1 five times.

for (let i = 1; i <= 5; i++) {
    console.log(1);
}

Output:

2) 1 2 3 4 5
Print numbers from 1 to 5.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Output:

3) 1 3 5 7 9
Print the first five odd numbers.

for (let i = 1; i <= 9; i += 2) {
    console.log(i);
}

Output:

4) 3 6 9 12 15
Print multiples of 3.

for (let i = 1; i <= 5; i ++) {
    console.log(i*3);
}

Output:

5) Multiples of 3 and 5

<!DOCTYPE html>
<html>
    <head>
    <title>document</title>
    </head>
    <body>
        <script>

        for(let i=1;i<=30;i++){
            if(i%3===0 && i%5===0){
                document.write("Multiples of 3 and 5:"+i+ "<br>");
            }
        }
</script>
    </body>
</html>

Output:

Multiples of 3 and 5:15
Multiples of 3 and 5:30

6) Multiples of 3 or 5

<!DOCTYPE html>
<html>
    <head>
    <title>document</title>
    </head>
    <body>
        <script>

        for(let i=1;i<=30;i++){
            if(i%3===0 || i%5===0){
                document.write(i+"<br>");
            }
        }
</script>
    </body>
</html>

Output:

7) Divisors of given number

<!DOCTYPE html>
<html>
    <head>
    <title>document</title>
    </head>
    <body>
        <script>

        let num=10;
        for(let i=1;i<=num;i++){
            if(num%i==0){
                document.write(i+" ");
            }
        }
</script>
    </body>
</html>

Output:

1 2 5 10

8) Count of Divisors of given number

<!DOCTYPE html>
<html>
    <head>
    <title>document</title>
    </head>
    <body>
        <script>

        let num=10;
        let count=0;
        for(let i=1;i<=num;i++){
            if(num%i==0){
                document.write(Divisors of 10:+" ");
                count++
            }

        }
        document.write("<br>");
        document.write("Count:"+count);
</script>
    </body>
</html>

Output:

Divisors of 10:1 2 5 10 
Count:4

Scenario Based Questions-Conditional Statements in JS

Kesavarthini — Wed, 01 Apr 2026 13:04:48 +0000

1) Shopping Discount System

let amount = 6000;
let isMember = true;
let discount = 0;

if (amount >= 5000) {
    discount = 0.20;
} else if (amount >= 2000) {
    discount = 0.10;
}

if (isMember) {
    discount += 0.10;
}

let finalPrice = amount - (amount * discount);

console.log("Final Price:", finalPrice);

2) Login Access Check

let username = "admin";
    let password = "1234";
    let isBlocked = false;

    if (username == "admin") {
        if (password == "1234") {
            if (!isBlocked) {
                console.log("User verified");
            }
            else {
                console.log("User blocked");
            }
        }
        else {
            console.log("Incorrect password");
        }
    }
    else {
        console.log("Incorrect username");
    }

3) Traffic Signal System

let signal = "red";

switch (signal) {
    case "red":
        console.log("Stop");
        break;
    case "yellow":
        console.log("Get Ready");
        break;
    case "green":
        console.log("Go");
        break;
    default:
        console.log("Invalid signal");
}

4) ATM Withdrawal

let balance = 5000;
let withdrawAmount = 2000;

if (withdrawAmount > balance) {
    console.log("Insufficient funds");
} else if (withdrawAmount <= 0) {
    console.log("Invalid amount");
} else {
    balance -= withdrawAmount;
    console.log("Remaining Balance:", balance);
}

5) Mobile Data Usage

let usage = 90;

    if (usage >= 100) {
        console.log("Limit exceeded");
    }
    else if (usage >= 80) {
        console.log("Warning: nearing limit");
    }
    else {
        console.log("Usage normal");
    }

Decision Making in JavaScript

Kesavarthini — Tue, 31 Mar 2026 12:43:17 +0000

🔀 Decision Making in JavaScript
Programs need to take decisions based on conditions, and JavaScript provides multiple ways to do that.

📌 1. if, else, else if

These are used to execute code based on conditions.

🔹 if Statement

if statement executes a block of code when a condition is true

let age = 18;

if (age >= 18) {
    console.log("You are eligible to vote");
}

Nested if
You can use an if statement inside another if statement:

let age = 16;
let country = "USA";

if (country == "USA") {
  if (age >= 16) {
    console.log("You can drive!");
  }
}

🔹 if-else Statement
Use the else statement to specify a block of code to be executed if a condition is false.

let age = 16;

if (age >= 18) {
    console.log("Eligible");
} else {
    console.log("Not Eligible");
}

🔹 The else if Statement
Use the else if statement to specify a new condition if the first is false.

let marks = 75;

if (marks >= 90) {
    console.log("Grade A");
} else if (marks >= 60) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

📌 2. switch Statement

Used when we have multiple conditions based on a single value.
switch is often used as a more readable alternative to many if...else if...else statements, especially when dealing with multiple possible values.

let day = 2;

switch(day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Invalid day");
}

This is how it works:

The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, no code is executed.

The break Keyword

When JavaScript reaches a break keyword, it breaks out of the switch block.
This will stop the execution inside the switch block.
No more statements in the switch block will be executed.
The break keyword is crucial for preventing a "fall-through."
Without break, the code will continue to execute the next case blocks (and the default block if present) even if their values do not match the expression.

📌 3. Truthy and Falsy Values
In JavaScript, values are treated as true or false in conditions.

🔹 Truthy Values
👉 Everything else is truthy.

Examples:

Non-zero numbers: 42, -1, 3.14
Non-empty strings: "hello", "0", " "
Objects and arrays: {}, []
Functions: function() {}
Dates: new Date()
Symbols: Symbol()
BigInt values other than 0n: 10n

🔹 Falsy Values

false
0 (and -0)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN

🔹 Example

let name = "";

if (name) {
    console.log("Name is present");
} else {
    console.log("Name is empty");
}

Output:

Name is empty

Operators in JavaScript

Kesavarthini — Tue, 31 Mar 2026 12:05:35 +0000

📌 What are Operators?

Operators are symbols used to perform operations on variables and values.

👉 Example:

let result = 10 + 5;

Here, + is an operator.

🧠 Types of Operators in JavaScript

JavaScript provides different types of operators:

🔹 1. Arithmetic Operators

Used for mathematical calculations.

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
/	Division
%	Modulus (remainder)
++	Increment
--	Decrement

Example:

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a % b); // 1

🔹 2. Assignment Operators

Used to assign values to variables.

Operator	Example
=	x = 10
+=	x += 5
-=	x -= 2
*=	x *= 3
/=	x /= 2

Example:

let x = 10;
x += 5; // x = 15

🔹 3. Comparison Operators

Used to compare values.

Operator	Description
==	Equal (value only)
===	Strict equal (value + type)
!=	Not equal
>	Greater than
<	Less than

Example:

console.log(5 == "5");   // true
console.log(5 === "5");  // false

🔹 4. Logical Operators

Used to combine conditions.

1. AND (&&)

👉 Returns true only if both conditions are true

✅ Example:

let a = 10;
let b = 5;

console.log(a > 5 && b > 2);  // true
console.log(a > 5 && b > 10); // false

2. OR (||)

👉 Returns true if at least one condition is true

✅ Example:

let a = 10;
let b = 5;

console.log(a > 5 || b > 10); // true
console.log(a < 5 || b > 10); // false

3. NOT (!)

👉 Reverses the result

✅ Example:

let isStudent = true;

console.log(!isStudent); // false

🔹 5. Unary Operators

Works with a single value.

let x = 5;

console.log(++x); // 6
console.log(--x); // 5

🔹 6. Ternary Operator

Shortcut for if-else condition.

let age = 18;

let result = (age >= 18) ? "Adult" : "Minor";
console.log(result);

📌 What is a Type Operator?

A type operator is used to find the data type of a variable.

🔹 typeof Operator

typeof is used to check the type of a value.

✅ Examples:

console.log(typeof 10);        // number
console.log(typeof "Hello");   // string
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined
console.log(typeof null);      // object (special case)

📌 What is Type Coercion?

Type coercion means:

👉 Automatic conversion of one data type to another by JavaScript

🔄 Types of Coercion
🔹 1. Implicit Coercion (Automatic)

JavaScript converts types automatically.

Example:

console.log("5" + 2);  // "52"
console.log("5" - 2);  // 3
console.log("5" * 2);  // 10

👉 + converts to string
👉 -, * convert to number

🔹 2. Explicit Coercion (Manual)

We manually convert types.

Example:

Number("10");   // 10
String(100);    // "100"
Boolean(1);     // true

🔥 Common Examples

console.log(true + 1);   // 2
console.log(false + 1);  // 1
console.log(null + 1);   // 1

⚠️ Important Rules
"5" + 2 → String
"5" - 2 → Number
true → 1
false → 0