DEV Community: Vignesh . M

TASK

Vignesh . M — Thu, 23 Oct 2025 08:11:25 +0000

Write a program to store 5 names in an ArrayList and print them. //Write a program to store 5 names in an ArrayList and print them. package StoreData;

import java.util.ArrayList;

public class StoreData {
public static void empelooyName(ArrayList names) {
names.add("Vicky");
names.add("Rajesh");
names.add("Ravi");
names.add("Mathi");
names.add("Sathish");
System.out.println("EmplooyNames in the ArrayList:");
for (String name : names) {
System.out.println(name);
}
}
public static void main(String[] args) {
ArrayList myNames = new ArrayList<>();
empelooyName(myNames);
}
}

output:
EmplooyNames in the ArrayList:
Vicky
Rajesh
Ravi
Mathi
Sathish

DOM CL - 1

Vignesh . M — Mon, 15 Sep 2025 09:36:22 +0000

DAY 1

WHAT IS DOM ?

DOM IS PROGRAMING INTERFACE
IN DOM N-NUMBER OF IN-BULID FUNCTION IS THERE
WITH THE HTML DOM ,JAVASCRIPT CAN ACCESS AND CHANGE ALL THE ELEMENTD OF AN HTML

WHAT IS HTML DOM ?
WITH THE OBJECT MODEL ,JAVASCRIPT GET ALL THE POWER IT NEED TO CREADE DYNMIC HTMT.

JAVASCRIPT CL - 9

Vignesh . M — Mon, 08 Sep 2025 06:48:35 +0000

DAY -9

// In javascript is a dianamic typeing so will given any datatype in a array and size is not fixed

//example :

const arr = [10,vic,20,30,40];

//How print the array with different method

 //first step : console.log(arr);//full arr data
        //secound : consle.log(arr[2]);//perticulor index data

//using WHILE loop :

const arr =[20,46,66,12,33 ]
        let i = 0
        while(i<5){
            console.log(arr[i]);
            i++;
        }//output : 20,46,66,12,33

USING FOR LOOP

 for(i = 0;i<arr.length;i++){
            console.log(arr[i]); 
        }//output : 20,46,66,12,33

using for-in loop
for in loop will given the index

 for(let array in arr){
            console.log(array);// show the index 
            console.log(arr[array]);//show the index value
             }//output : 0 1 2 3 4 
             //output : 20,46,66,12,33

//for of loop 
//for of will given the index value
for(let mar of arr){
    console.log(mar);

}//output:  20,46,66,12,33

//foreach loop
//foreach is called a callbackfuction calling statement
//foreach using function

 arr.forEach(printmark);
    function printmark(arr) {
        console.log(arr);
        }

//foreach with function
//arroy function is not a callback function .because arroy function is a similified of function only
//foreach only runs forword only not backword

arr.forEach(marks => {console.log(marks)
    });///output:  20,46,66,12,33

JAVASCRIPT CL - 8

Vignesh . M — Sat, 06 Sep 2025 09:44:13 +0000

DAY -8

HOW TO CHANGE THE WHILE LOOP TO FOR LOOP FOR UNDERSTANDING

SAMPLE WHILE LOOPING CODE:

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

        }// OUTPUT 1 2 3 4 5

SAMPLE FOR LOOPING CODE:

for(j=0;j<=5;j++){
            console.log(j);

        } //OUTPUT : 0 1 2 3 4 5

NEXT WILL DICUSS
1.ARROW FUNCTION
2.ARRAY
3.FOREACH

ARROR FUNCTION:

NORMAL FUNCTION CODE :
syntax for function

function functionname( variable){
        log.();
    }
    functionname(value)

NOW , WE CHANGE THE FUNCTION TO ARROW FUNCTION

syntax for arrow function

()=>{ 
        log.("hi"); 
       }

IN ARROW FUNCTION WILL WRITE THE ONE LINE CODE curly braces IS NOR MANITAOR

SAMPLE CODE :

()=> log.("HI");

1.WHY WILL USE NARROW FUNCTION ?
* NORROW FUNCTION ONLY USED TO SMILIFY THE FUNCTION ONLY.
2.THEN WHY CALL ARROW FUNCTION ?
* CREAT ONE VARIABLE TO CALL THE ARROW FUNTION
Syntax:

const variableName = () => console.log("HI");

sample code

//arrow function
        const display = () => console.log("hi");
        display() //  OUTPUT : hi

DIFFERENT BETWEEN HOISTED AND NON- HOISTED
* FUNCTION IS CALLED HOISTED .BECAUSE BEFORE DECLARECTION WILL USES THE FUNCTION NAME IS CALL HOISTED
* VARIABLES IS CALLED A NON-HOISTED .BECAUSE BEFORE DECLARECTION IS NOT WORKING .BECAUSE IF DECLARE THE VARIABLE NAME THEN ONLY THE MEMORY WILL CREATE SO VARIABLE IS CALLED NON-HOISED
EXAMPLE CODE FOR NON-HOISTED

display() // VARIABLE
    const display = () => console.log("hi"); // IF WE CALLED THE VARIABLE BEFORE MENCTION IS ACCORED ERROW

ARRAY:

SET OF DATA STORED IN A SINGLE VARIABLE AND THE DATA WILL STORE IN A INDEX FORM . AND ARRAY WILL 0TH INDEX WHY WE WILL YOU ARRAY ?
IN REAVLE WAORD WE STORE THE ONE STUDENT EXAM MARKS TAM = 87 ENG = 77 MATH = 89 SCI = 98 SS = 88
IN THIS SUTIVATION WE WILL CERATE A MULTIPLE VARIABLES . SO SOVE THIS ISSUE TO WE USE THE ARRAY . SO USING ARRAY SET OF PERTICULR DATA IN A STORED IN A SINGLE VARIIABLE

EXMPLE:
MARKS = [ 87 77 89 98 88] // THIS IS CALLED ARRAY

IN JAVASCRIPT WILL WRITE THIS CODE

const marks = [ 87 77 89 98 88] //

SAMPLE CODE :

const marks = [2,3,4,5,6];
        console.log(marks[3]);// OUTPUT : 5
        console.log(marks);//Array(5) [ 2, 3, 4, 5, 6 ]
        console.log(marks);// OUTPUT : Array(5) [ 2, 3, 4, 5, 6 ]
        // reassin the value of index 3 
        marks [3]= 45;// reassin the value 
        console.log(marks);// outpur : Array(5) [ 2, 3, 4, 45, 6 ]

JAVASCRIPT CL - 7

Vignesh . M — Sat, 06 Sep 2025 07:22:48 +0000

DAY -7
FIND THE DIVISOR
TASK 1
find the divisior

 let count =1;
        while(count<100){
            if (count%2==0 && count %3==0){
                console.log(count);

            }
            count++;
        }

TASK 2
find the divisor of 10 without function

let count = 1;
        while(count<20){
            if (10%count===0) {
                console.log(count);


            }
            count++;
        }

with function to find the divisor

findDiv(10);
        function findDiv(no) {
            console.log(`find divisor = ${no}`);
            let count = 1;
            while (count <= no ){
                if (no%count==0) {
                    console.log(count);

                }
                count++;
            }
        }//output : 1 2 5 10

TASK 3
COUNT OF DIVISOIR COUNT

countOfDiv(10);
        function countOfDiv(no) {
            console.log(`find divisor = ${no}`);
            let count = 1;
            let i=0;
            while (count <= no ){
                if (no%count==0) {


                    i++;

                }

                count++;
            }
            console.log(i);

        } // output : 4

TASK 4:
find the given number is primeNo or not

 countOfDiv(73); //function calling
        function countOfDiv(no) { // function
            console.log(`find divisor = ${no}`);
            let count = 1; // count value
            let i = 0; // i value
            while (count <= no) { //while
                if (no % count == 0) {
                    i++;
                }

                count++;
            }
                if (i > 2) {
                    console.log("NOT A PRIME",no);

                }else{
                    console.log("GIVEN NO IS PRIME NUMBER ",no);

                }


        } //output : GIVEN NO IS PRIME NUMBER  73

_DO-WHILE
_
*while is called entery check
sample code for entery check

let i =5;
while(i<5){
console.log("hello");
}

*In this condtion is false .because 5 is not lesser then 5 . so this code not run .
the condition will checked by entery level . if the condition is true the code will run
or false means not run

do-while is called exited check
- do-while is called exited level check because if user need the before condition will check or atleast one time the code will run

EXAMPLE CODE FOR EXITED LEVEL CHECK

let i =5;
do{
    console.log("hello");
    i++
}
while(i<5);// output : hello

*In this code will run before condition will check.

JAVASCRIPT CL -6

Vignesh . M — Thu, 04 Sep 2025 06:55:00 +0000

DAY -6

LOOPING - is used to repated the same action in code or output

so , for example will print number 5 in five time

so , in javascript

console.log("5");
console.log("5");
console.log("5");
console.log("5");
console.log("5");

So the code will repate so this proble will solve to using loop

In looping we are
1. for loop
2. while loop
3.do-while loop

HOW TO LOOPING WILL WORKED

*IF THE THE STARTING STAGE THE COUNT = 0 ;
*CONDICITION IS 5 TIME PRINT THE NUMBER 1 IS A OUTPUT
*SO CHECK THE CONDITION IS LESSERTHEN 5 OR NOT IF CONDITION IS TRUE
*THE FIRST OUTPUT IS SHOW BUT WE NEED 5 TIME PRINT IN THE OUTPUT BUT CURRENTLY WE PRINT 1 TIME ONLY
*SO CURRENTLY THE COUNT VALUE IS 1 SO PREVIWES COUNT VALUE 0 TO 1 *SO ADD 1. COUNT = COUNT + 1 ; THEN ONLY WILL GET THE OUT PUT OF 5 *TIME PRINT THE NUMBER 1
*THIS LINE WORKING COUNT = PREVIEWS COUNT VALUE + 1 ;// COUNT = 0 + 1;

EXAMPLE CODE FOR WE NEEDED OUTPUT : FOR NORMAL HUMAN MIND SIDE


     let count = 0;
    if (count < 5){ // (1 < 5 )- TURE 
        console.log("1");
        count = count +1; // 0 +1 = 1
    }

    if (count < 5){ // CURRENT COUNT VALUE (1 < 5) - TRUE
        console.log("1");
        count = count +1; 1+1 = 2
    }

    if (count < 5){ CURRENT COUNT VALUE (2 < 5) - TRUE
        console.log("1");
        count = count +1; 2+ 1 =3
    }

    if (count < 5){ CURRENT COUNT VALUE (3 < 5) - TRUE
        console.log("1");
        count = count +1; 3 + 1 =4
    }

    if (count < 5){ CURRENT COUNT VALUE (4 < 5) - TRUE
        console.log("1");
        count = count +1; 4 + 1 = 5
    }

    if (count < 5){{ CURRENT COUNT VALUE (5 < 5) - FALSE SO CODE WILL ENDED 

    }

SO WE NEED LOOPING TO SOLVE THE ISSUE .BECAUSE WILL SIMPLYFIED THE CODE

WHILE LOOP

let count = 0;
while(count<5){
    console.log("1");
    count = count + 1;
}
 console.log(count);// this code will show the count value 
        output :
        1 1 1 1 1

// SO WE USEING THE LOOPING STATEMENT TO SIMPLYFIED RTHE CODE

THIS CODE ITERATION IS PREVIEWS HUMAN MIND SIDE CODE

TASK 1
NEED OUTPUT IS 1 2 3 4 5

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

        } // OUTPUT IS 1 2 3 4 5

TASK 2
NEED OUTPUT IS 5 4 3 2 1

let count = 5
        while (count>=1) {
            console.log(count);
            count--;
        }

TASK 3
NEED OUTPUT 0 2 4 6 8 10

 let count = 0
        while (count<=10) {
            console.log(count);
            count = count +2;
        }

TASK 4
NEED OUTPUT 10 8 6 4 2 0

let count = 10
        while (count>=0) {
            console.log(count);
            count= count -2 ;
        }

JAVASCRIPT CL - 5

Vignesh . M — Thu, 04 Sep 2025 06:06:56 +0000

DAY -5

SWITCH CASE

in javascript switch case is used to already stored data will getting the particular value or case number

syntax for switch case:

switch (user given value ){
    case 1:
        console.log("stored data");
        break;
    case 2:
        consloe.log ("another store data");
        break;
    default:
            console.log("user will given the invaild data");

}

sample code:

find the day of the week useing switch case

 <script>
        let day =4;//user give data
        switch(day){
            case 1 :
                console.log("monday");
                break;
            case 2 :
             console.log("tuesday");
             break;
            case 3:
                console.log("wesday");
               break;
            case 4:
                console.log("thrusday");
                break;
             case 5:
                console.log("friday")
              break;

        default:
            console.log("Enter Valued Input");
        }  //output : thrusday

MINI PROJECT : 1

COLLECT THE DATA FROM THE USER AND CREATE THE LOGIN AND PASSWORD ,USING PROMPT

<script>

const userName = "vicky"; // ALREADY STORE DATA
const Password = "1324";

    const userinputName = prompt("ENTER THE MAIL-ID"); //
    const inputPassword = prompt("ENTER THE PASSWORD")
    console.log(userinputName);
    console.log(inputPassword);

    if (userName === userinputName && Password === inputPassword) {
        alert("login successfully")
        const options = prompt("WELCOM TO HOME-PAGE!\n1.view profile \n 2 setting page \n 3.adimin page");
        switch (options) {
            case "1":
                alert(`username : ${userName}\n password : ${Password}`);
                break;
            case "2":
                alert(`menu \n privacy \n logout`);
                break;
            case "3":
                alert(`EDITED all code and setting with admin login`);
                break;
            default:
                alert("invaild data");
                break;



        }
    }
    else {
        alert("INVALID USERNAME AND PASSWORD")
    }

PROJECT OUTPUT LINK :
https://front-end-project692430.gitlab.io/-/front-end/-/jobs/11240913023/artifacts/public/miniproject1.html

JAVASCRIPT CL-4

Vignesh . M — Tue, 02 Sep 2025 08:48:33 +0000

DAY 4
opretor in javascript
comparison opratore
= - assionment opretore
== - comparision opretore or equality oprator

explame : 10 = = 10 //true
"10" == 10//true .beacause in javascript only check the value only not a datatype
"10" ==== 10//false . because if given the three equalse will also chenk the datatype also

next not equal !=
10 != 10 //false .beacuse will check the value is not equals or not but in this statument is equla
9 != 10 // true .
"10" !== 10 // true .because this check the type also

equlaent oprators:
==
===
!=
!==

comparision oprator
< - lessthan //find the number is small or not
> - greatthen // find the number is big or not
<= - lessthen or equalto
>= - greatthen or equalto

example:
7 < 10 // true // because 7 is small then to 10
7 >10 // false // because 7 is not bigerthen 10
10 < 10 // false // because 10 is not small or then 10
10 <= 10 //true // becaues 10 is small then or equal to 10 so true
10 > 10 //false // because 10 not bigerthen 10
10 >= 10 // true // because 10 is bigerthen or equal to 10 so true

logical operator:
AND - $$
OR - ||
NOT - !

AND GATE
if using AND gate the both of the two side is equal then only true
example : 10<7 && 10<6 //true && true

OR GATE
IF using OR gate any one of the side is true is the condision is true
example : 10<6 || 10>6 true || false

//AND gate

  let ram =8;
        let rom = 128;
        if (ram>=8 && rom >= 128)
    {
        console.log("buy");
    }//output : buy

//OR GATE //it also ram and rom

 let raam = 6;
    let room = 128;
    if(raam  >= 8 || room >= 128)//false ||  true
    {
        console.log("take") 
    } // output : take

//CONDISION IS FALSE IN THE CODE SO NO OUTPUT

// let i = 5;
    // let j = 4;
    // if(--i>j && i++ >=j--)//(4 > 4 && 5  >= 3)
    // {
    //     console.log("true")
    //     console.log(i)
    //     console.log(j)
    // }//not given the output

//CONDICTION TRUE IN THE OUTPUT

let k =5;
    let m = 4;

    if(--k>m || k++ >=m--)//(4 > 4 || 5 >= 3)
    {
        console.log(k);
        console.log(m); 
        console.log("code done"); 
    }
    //output 5  - 3  - code done

//condiction if parchaes value is greaterthan or erqual to 1000Rs then you get discount

 let perchesvalue = 1000;
    if (perchesvalue >= 1000)
    {
        console.log('10% discount')
    }
    else{
        console.log("no discount")
    }

NO DISCOUNT CODE

let prodectvalue = 100;
    if(prodectvalue >= 1000)
    {
        console.log('discount')
    }
    else{
        console.log ("No discount")
    }// OUTPUT : NO Discount

//task student take 50 and pass mark is above 50 is pass or below 50 is fail

 let studentmark= 50;
    if (studentmark>=50)
    {
        console.log("pass")
    }
    else{
        console.log("fail")
    }

//task if the student get a 90% mark will given A- great and if student taking 75% mark will get B -great

 studentsmark = 98;
    if(studentsmark>=50){
        if(studentsmark >=90)
    {
        console.log("GREAT - A")
    }
    else{
        console.log("GREAT -B")
    }
    }
    else{
        console.log("fales")
    }//output: great -A

JAVASCRIPT CL-3

Vignesh . M — Tue, 02 Sep 2025 06:27:47 +0000

Day 3

*Javascript is a dynamic type- if meation the type means is realted to the datatype

In javascript
let i= 10;
i= "abc";
i= null;
In javascript will reassin the value number to string -number to boolean this is call dainamic typing


     let i = 10;
        console.log(i);
        i= "abc";
        console.log(i);
        //output - 10  abc

    //find the type using type of

 let j = 10;
        console.log(typeof j);
        j= "abd";
        console.log(typeof j);
        //output : number  - string

//function is a keyword

//function is a set of instruction with a name
//// the mainthing to use to create the function to use the code reuseablity if need the set of code need will call only the fuctionname only .
syntax of createing funtion


    function functionName()
    {

    }

sample code :

function functionName()
    {
        console.log("hi function");

    } 
    functionName();// this a function calling statement

if call the function calling multiple times if you needed
////function - is keyword : functionname - is a nameof the function : () - need input inside the ()

 function add(no1,no2)
    {
        console.log(no1+no2);
    }
    add(10,20);//output : 30
    add(20,48);//output : 68

//sample code 2

function greeting(name)
    {
        console.log("hii goodmoring " +name);
    }
    greeting("vicky")//output: hii goodmoring vicky

**_//function is call hoisted

Function Declarations: Function declarations are fully hoisted, meaning both the declaration and the function's definition are moved to the top of their scope. This allows functions to be called before they are declared in the code

//variavle is call not-hoisted _**

 let k=10;
    console.log(k);//output : 10

//task 1
//fuction (''abc") find the type of variable in the output

 function tasks(name)
    {
        console.log(name + typeof name);
    }
    tasks("kumar");
    tasks(152)
    tasks(1657746365n)

output:
    kumarstring 
    152number
    1657746365bigint

JAVASCRIPT CL-2

Vignesh . M — Mon, 01 Sep 2025 09:26:46 +0000

Javascript anothor name is Eggmassscript
symble - es-6
bigint - es-11
new datatypes

variable diclaration
var , let , const
and without declatoin

they are two type of launage is there
1. Statically
2.Dynamically

STATIC TYPE
JAVA IS ALSO A STATIC TYPE
STRING name = abc;
name = xyz;
in java will reacin the value of the variable;
in static is must declaor the datatype

DYNMIC TYPE
JAVASCRIPT IS A DYNAMIC TYPE
student = abc;
without meansion the data types

html - is like builded house
css - is paint for the house
javascript - is a function like a electronic items

in javascript will replace the defecaties in var datatype
so using let and const

/block scope - peticular function only it's work
//global scope - program fully worked

print will use consol-log in javascript

goble scope and local scope

In javascript

 //block scope - peticular function only it's work
    //global scope -  program fully worked

    //without any keyword
    //var - function scope 
    //let - block level scope
    //const - block scope

function learnvariable() // name of the function
        {
            name = "vicky"; // data store
            console.log(name);//printstatement
        }
        learnvariable();//calling menthod

in javascript if the variable will called only called and will show in the output
if the output will show will use print statement outside of the function

if the function difind and function calling is now completed

why we doesn't use the var in javascript
for example code:

 function learnvariable()
        {
           var name = "vicky";
           var name = "main";
            console.log("inside",name);
        }
        learnvariable();
        console.log("outside",name);
output
    inside main // it's take a reassing in data
    outside vicky//outside calling will take the without reassing  data

in var problem
1.it is not a block scope
2.redeclation defecaties or reassing issue
3.var will allow two time diclare the var
so ,this proble will solve to use let


    function learnvariable()
        {
           let name = "vicky";
            console.log("inside",name);
        }
        learnvariable();
        console.log("outside",name);

in this function will only allow one time declear the let

will scerate the progrmaimg launage
1.compiled prg
2.interpretor prg
will using const will never change or not reasing the value of variable

function learnvariable()
        {
           const Username = 10;
            usernamr =20; // its shows a error 
            console.log("inside",Username);
        }
        learnvariable();
        console.log("outside",Username);

next will find the datatype of the vale

let i = "hii";
        console.log(typeof i);//if find the type of the datatype using typeof
output:
       string

JAVASCRIPT CL - 1

Vignesh . M — Mon, 01 Sep 2025 07:00:58 +0000

JAVASCRIPT

what is javascripe?
*This is front end programming launage
*There are two type of process is there in full stack

1.frontend
2. backend *In backend can store the data in storeage in database and retrive the data in database .and uses to retrive the data in 1.trt , 2. pdf, 3 xls this type of formate to share the data to frontend process

*So the frontend developer can know the html and css to create the table using html and css
*We using prgram launage to learing for data handling only.
there are three type of application is there
1. mobile application
2.web application
3.system application

Data:
It like a information( for example : name ,genter,age,marital status)
name = string
age= number (interger)
gender= string
heignt= decemale number(float)
maritale status = true or false (boolen)
contant = number (big interger or long)

in javascript has 8 datatype
1.STRING - more then one chareter to write in javascripe using "" and ''also
2.NUMBER - number is all number
3.BIGINT - long number
4.UNDEFINDED - without using var,let,const is called undefind
5.NULL - without store the value is call null
6.SYMBLE -(TBD)
7.OBJECT -Collection of datas and datatype
8.BOOLEAN - true or false

variables
it a lable of data (for example:)
kumar - name = kumar is a data and name is a variable and also called identifier
in javascript to diclare the variable to use the key words
1.LET
2.VAR
3.CONST

example :
let number = 25;
keyword - variable - assing oprator - value or data ;
in java will mention the datatype is compalsory . but in javascript data type menstion is not manitory
for example: in java
string name = "kumar"; mention the datatype is manitory
IN javascript
let name = "kumar"; datatype is not manitory

FRONTEND (HTML)

Vignesh . M — Tue, 08 Jul 2025 08:42:35 +0000

HTML Introduction
* HTML stands for Hyper Text Markup Language, which is the core language used to structure content on the web. It organizes text, images, links, and media using tags and elements that browsers can interpret. As of 2025, over 95% of websites rely on HTML alongside CSS and JavaScript, making it a fundamental tool in modern web development.

It is a markup language, not a programming language. This means it annotates text to define how it is structured and displayed by web browsers.
It is a static language, meaning it does not inherently provide interactive features but can be combined with CSS for styling and JavaScript for interactivity

Basic HTML Code Example

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is my first paragraph of text!</p>
</body>
</html>

OutPut :

HTML Page Structure
* The basic structure of an HTML page is shown below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.

1. What is Hypertext?
* Hypertext is text that contains links to other texts. When you click on these links, you’re taken to related information — this is the core idea behind how the web works.

Hypertext = Text + Links

For example:

<a href="https://example.com">Visit Example</a>

2. Why "Hyper"?
The prefix "hyper-" means "beyond" or "more than."

So hypertext goes beyond regular text — it connects documents together using hyperlinks.

_Referred like _