DEV Community: Ezhil Arasan

My day

Ezhil Arasan — Mon, 22 Jun 2026 19:32:51 +0000

This is the day, which is the biggest change in my life. A life of a man is started in graduation, but I failed in the graduation. Am Ezhilarasan pursing BE degree in chennai, I had the 2 backlogs in my studies in final semester. College of my life is finished but I was ashamed to tell that I am an Engineering student.

Every mam begins with failure, so I decided that today is my changing point of my life. Today (22nd JUNE 2026), I going to put the failure of my life to an end on today. The new life begins tomorrow. Every steps of my life here after I gonna to take carefully and to make my mind to mark risk to make my life even better then ever, to settle in my life.

"REMEMBER THAT FAILURE IS NOT OPPOSITE OF SUCCESS, IT'S PART OF SUCCESS"this is the quotes am taken as to realize the my current situation, here after there is no wasting time , money ,etc in my life time until I see my successful life time. The way I came up in my may be wrong, but I am not going to do the same mistake ever in my life, new life begins at this moment.

Am going to make my life a perfect, my goal here after is only
making money at any cost of my situation. I remember a quote "MONEY MAKES EVERYTHING".

I had my worst days, ever decision of my life is taken by my family members and the situation that the moment, but now at this point at this moment am talking my own complete satisfied decision to be successful in my life.

I may take some days to over come but no way am gonna lose or give up at any cost and at any situation. I will success, my mind in the state that I cant satisfied about my life, at the present moment am I am in my failure, I dont know that how am going to make my life success.

I am pursing JAVA fullstack course, but how am going to get the job in the future is big question mark? So now I going to take my a decision that to create a business and make the successful businessman and succeed in my life.

Why I make this decision now? when I make my life successful there is no person to ask questions on me, most of the people why we want to answer for them? this a good question but did you think that we are living in society (relatives, friends, family ,etc) of making questions on other life only so we must them , not by talking, shouting but answer them with your success, make the society silent by you success.

It doesn't matter how I failed now? It doesn't matter how many times I failed in my life here after? at last I will succeed in my life so there is no doubt I will make my life successful.

Array in JavaScrip

Ezhil Arasan — Fri, 19 Jun 2026 14:20:52 +0000

What is an array?
An array in JavaScript is a global object used to store an ordered collection of multiple values under a single variable name. JavaScript arrays are zero-indexed, dynamic in size, and can hold a mix of different data types

Why Use Arrays?
If you have a list of items (a list of bike names, for example), storing the names in single variables could look like this:

let bike1 = "Pulser";
let bike2 = "apache";
let bike3 = "duke";

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

Syntax:
const array_name = [item1, item2, ...];

 const bike = ["pulser", "apache", "duke"];

Converting an Array to a String

The JavaScript method toString() converts an array to a string of (comma separated) array values.


const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, person[0] returns John:

 const person = ["John", "Doe", 46];

Array Elements Can Be Objects

JavaScript variables can be objects. Arrays are special kinds of objects.

Because of this, you can have variables of different types in the same Array.

You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Looping Array Elements

One way to loop through an array, is using a for loop:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Adding Array Elements

The easiest way to add a new element to an array is using the push() method:

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.

 const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

When to Use Arrays. When to use Objects.

JavaScript does not support associative arrays.
You should use objects when you want the element names to be strings (text).
You should use arrays when you want the element names to be numbers.

Nested Arrays and Objects

Values in objects can be arrays, and values in arrays can be objects:

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

Basic Array Methods
Array length Array toString() Array at() Array join() Array pop() Array push() Array shift() Array unshift() Array isArray() Array delete() Array concat() Array copyWithin() Array flat() Array slice() Array splice() Array toSpliced() Array some() Array reduce() Array map() Array every() Array flatMap() Array filter() Array findindex() Array find() Array fill() Array forEach() Array sort() Array concat() Array includes() Array reverse()

Refrence
https://www.w3schools.com/js/js_arrays.asp
https://www.geeksforgeeks.org/javascript/best-known-javascript-array-methods/

Boolean/CRUD/Boilerplate

Ezhil Arasan — Thu, 18 Jun 2026 15:46:46 +0000

Booleans
Very often in programming, you will need a data type that can only have one of two values, like:

YES / NO
ON / OFF
TRUE / FALSE

For this, Java has a boolean data type, which can store true or false values.

Boolean Values

A boolean type is declared with the boolean keyword and can only take the values true or false:

boolean isJavaFun = true;
boolean isFishTasty = false;

System.out.println(isJavaFun);    // Outputs true
System.out.println(isFishTasty);  // Outputs false

Boolean Expressions

A boolean expression returns a boolean value: true or false.
This is useful to build logic and make decisions in programs.

For example, you can use a comparison operator, such as the greater than (>) operator, to find out if an expression (or a variable) is true or false:

int x = 10;
int y = 9;

System.out.println(x > y); // Outputs true, because 10 is greater than 9

Store the Result in a Boolean Variable

You can also store the result of a comparison in a boolean variable:

int x = 10;
int y = 9;

boolean isGreater = x > y;

System.out.println(isGreater); // Outputs true

*CRUD operations *

Create: Create a new object or add an object property to an existing object .
Read: Read any object existing property property
Update: Update or modify an object or the attribute values.
Delete: Delete or remove an entry from an object or the whole object.

Create Operation

This operation refers to the creation of an object or adding a new property to it. The following methods can be used to create the Object:

Using Object Constructor: It is a function that is used to create and initialize an object. The return value is assigned to a variable. The variable contains a reference to the new object.
Using Object literals: It is the list of key-value pairs separated by a comma ", " for creating an object.

// Using Object Constructor
const obj = new Object();
// Using Object Literals
cosnt obj = {
    key1 : value1
}

Read Operation

The read operation refers to reading and accessing the properties and values of an object. It can be done using the following methods:

Using Destructuring Assignment: It refers to the JavaScript syntax for unpacking the object values and assigning them to other variables.
Using Dot Notations: This syntax allows to access the object properties and items using a [dot] or ". " symbol.
Using Bracket Notation: It allows to access the object property using the property name inside the brackets "[ ]"


// Creating new object
const rectangle = {
    length: 25,
    width: 20,
    area: function () {
        return this.length * this.width
    }
}

const { length } = rectangle
console.log("Rectangle length: " + length);
console.log("Rectangle width: " + rectangle['width']);
console.log("Rectangle area: " + rectangle.area());

Update Operation

It means to access and modify an object's properties. It can be done using these methods:

Using Destructuring Assignment: It refers to the JavaScript syntax for unpacking the object values and assigning them to other variables.
Using Dot Notations: This syntax allows to access the object properties and items using a [dot] or ". " symbol.

const rectangle = {
    length: 25,
    width: 20,
    area: function () {
        return this.length * this.width;
    }
}

// Display Initial Area
console.log("Original Area: " + rectangle.area());

// Update Values
rectangle.length = 50;             // Usign dot notation 
rectangle['width'] = 40;           // Usign brackets

// Display Updated Area
console.log("Original Area: " + rectangle.area());

Delete Operation

Delete operation refers to the removal of an object property. It can be done as follows:

Using Delete operator: Delete keyword is used to remove the object property mentioned after it.
Using Destructuring Assignment: It refers to the JavaScript syntax for unpacking the object values and assigning them to other variables.

const obj = {
    name: 'xyz',
    age: 52,
    city: 'delhi'
}


// Display original object
console.log("Original object: ", obj);

// Using destructuring
const { age, ...newObj } = obj;
console.log("New object without age attribute: ", newObj);


// Using delete operator
delete obj.city;
console.log("Original object after deleting city: ", obj);

Boilerplate

In JavaScript, boilerplate refers to reusable, standard code configurations that developers use as a foundational starting point to spin up new applications or features without rewriting repetitive code from scratch.

What is Boilerplate Code?

In programming languages(HTML/JAVA/Python), boilerplate code refers to reusable sections of code that are included in multiple places with little or no modification. This practice ensures consistency and efficiency across various parts of an application.

For Example, In web development, an HTML boilerplate provides a standard template that includes essential elements like the doctype declaration, <html>, <head>, and <body> tags. This template is a foundation, which allows developers to focus on unique content without rewriting common structures.

For absolute beginners, we recommend avoiding the use of boilerplate code while learning programming. Once you're familiar with the fundamentals, however, boilerplate code can be helpful for focusing on more important aspects of coding without getting bogged down by repetitive tasks.

Steps to create Boilerplate
Step 1: Open your IDE's settings to start setting up a reusable snippet.

Step 2: Look for the "User Snippets" section, where you can save reusable code.

Step 3: Paste your boilerplate code into the snippet area for easy access.

Step 4: Save the snippet, allowing you to reuse this code in future projects effortlessly.

Advantages

Time-saving: It eliminates the need to rewrite common structures, making your coding process much faster.
Error Reduction: By using tried-and-tested code, you reduce the chances of errors in the basic structure.
Consistency: It ensures that your projects have a uniform structure, making your code more readable and maintainable.
Easy Collaboration: If you're working in a team, using boilerplate code ensures everyone starts with the same structure, which makes collaboration smoother.

Boilerplate:

Provides a standardized set of code or configuration files as a starting point for new projects.
Typically includes essential components like directory structures, configuration settings, and common dependencies.
Aims to save time by reducing repetitive setup tasks and ensuring consistency across projects.

Refrence
https://www.w3schools.com/Java/java_booleans.asp
https://www.geeksforgeeks.org/javascript/how-to-perform-crud-operations-on-javascript-object/
https://www.geeksforgeeks.org/html/what-is-boilerplate-code/

Function in JS

Ezhil Arasan — Wed, 17 Jun 2026 07:27:03 +0000

what is function?
A JavaScript function is a reusable block of code designed to perform a specific task. You write the code once, and you can run (or "invoke") it as many times as you need throughout your program.

Why Use Functions?

Functions help you to:

Reuse code (write once, run many times)
Organize code into smaller parts
Make code easier to read and maintain

What Does a Function Look Like?
A function can be created with the function keyword, a name, and parentheses.

The code to run is written inside curly brackets.

Example
A one liner:

function sayHello() { return "Hello World"; }
or more common:

function sayHello() {
  return "Hello World";
}

Calling a Function
A JavaScript function runs when it is called.
To call a function, write the name followed by parentheses like name().

Function Invocation
The code inside a function is NOT executed when the function is defined.

The code inside a function will execute when "something" invokes the function:

When it is called from JavaScript code
When an event occurs (a user clicks a button)
Automatically (self invoked) It is common to use the term invoke, because a function can be invoked without being called.

It is also common to use say:

call a function
call upon a function
start a function
execute a function

Examples

The function below returns the text "Hello World".
But it will not run before you call it.


function sayHello() {
  return "Hello World";
}

Using the Returned Value

When a function returns a value, you can store the value in a variable.


function sayHello() {
  return "Hello World";
}

let greeting = sayHello();

Displaying the Result
You can display the returned value in many ways, for example using console.log() or HTML.

function sayHello() {
  return "Hello World";
}

console.log(sayHello());

JavaScript Function Parameters
Parameters (Function Input)
Parameters allow you to pass (send) values to a function.
Parameters are listed inside the parentheses in the function definition.


function multiply(a, b) {
  return a * b;
}

let result = multiply(4, 5);

Functions with Multiple Parameters

You can add as many parameters as you want, separated by commas.

function fullName(firstName, lastName) {
  return firstName + " " + lastName;
}

let name = fullName("John", "Doe");

Parameters vs. Arguments

In JavaScript, function parameters and arguments are distinct concepts:
Parameters are the names listed in the function definition.
Arguments are the real values passed to, and received by the function.

Parameter Rules

JavaScript function definitions do not specify data types for parameters.
JavaScript functions do not perform type checking on the arguments.
JavaScript functions do not check the number of arguments received.

JavaScript Function Arguments

function multiply(a, b) {
  return a * b;
}

let result = multiply(4, 5);

In the example above:

a and b are parameters
4 and 5 are arguments

The argument 4 is assigned to the parameter a.
The argument 5 is assigned to the parameter b.

The Arguments Object

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called (invoked).

This way you can simply use a function to find (for instance) the highest value in a list of numbers:

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  let max = -Infinity;
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

Arguments Can Be Variables

Arguments do not have to be values. They can also be variables.

let x = 5;
let y = 6;

function multiply(a, b) {
  return a * b;
}

multiply(x, y);

JavaScript Function Return

Returning Values from Functions
A function can return a value back to the code that called it.
The return statement is used to send a value out of a function.
The return Statement
When a function reaches a return statement, the function stops executing.

The value after the return keyword is sent back to the caller.


function sayHello() {
  return "Hello World";
}

let message = sayHello();

Return Values

A function can return any type of value (not only numbers).

function fullName(firstName, lastName) {
  return firstName + " " + lastName;
}

let name = fullName("John", "Doe")

Refrence
https://www.w3schools.com/js/js_function_expressions.asp

JavaScript

Ezhil Arasan — Tue, 16 Jun 2026 19:11:02 +0000

JavaScript Syntax
JavaScript syntax refers to the rules and conventions dictating how code is structured and arranged within the JavaScript programming language. This includes statements, expressions, variables, functions, operators, and control flow constructs.

Syntax

console.log("Basic Print method in JavaScript");

JavaScript Operators

Operators are for Mathematical and Logical Computations

The Assignment Operator = assigns values

The Addition Operator + adds values

The Multiplication Operator * multiplies values

The Comparison Operator > compares values

JavaScript Assignment

The Assignment Operator (=) assigns a value to a variable:
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;

JavaScript Addition

The Addition Operator (+) adds numbers:


let x = 5;
let y = 2;
let z = x + y;

JavaScript Multiplication

The Multiplication Operator (*) multiplies numbers:

let x = 5;
let y = 2;
let z = x * y;

JavaScript Conditionals

Conditional Statements

Conditional Statements allow us to perform different actions for different conditions.

Conditional statements run different code depending on true or false conditions.

Conditional statements include:

if
if...else
if...else if...else
switch
ternary (? :)

When to use Conditionals

Use if to specify a code block to be executed, if a specified condition is true
Use else to specify a code block to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative code blocks to be executed
Use (? :) (ternary) as a shorthand for if...else

The if Statement

Use if to specify a code block to be executed, if a specified condition is true.

Syntax

if (condition) {
  // code to execute if the condition is true
}

The else Statement

Use else to specify a code block to be executed, if the same condition is false.

Syntax

if (condition) {
  // code to execute if the condition is true
} else {
  // code to execute if the condition is false
}

The else if Statement

Use else if to specify a new condition to test, if the first condition is false.

Syntax

if (condition1) {
  // code to execute if condition1 is true
} else if (condition2) {
  // code to execute if the condition1 is false and condition2 is true
} else {
  // code to execute if the condition1 is false and condition2 is false
}

**The switch Statement**

Use switch to specify many alternative code blocks to be executed.
**Syntax**

switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

Ternary Operator (? :)

Use (? :) (ternary) as a shorthand for if...else.
Example
condition ? expression1 : expression2

Variables and Datatypes in JavaScript

Ezhil Arasan — Wed, 03 Jun 2026 07:08:46 +0000

Variables and Data Types in JavaScript are fundamental concepts used to store and manage data in a program. They define how information is declared, stored, and manipulated during execution.
Variables: Declared using var, let, and const to store data values.
Primitive Data Types: Includes Number, String, Boolean, Null, Undefined, BigInt, and Symbol.
Non-Primitive Data Types: Includes Object, Array, and Function used to store complex data.

Variables

A variable is like a container that holds data that can be reused or updated later in the program. In JavaScript, variables are declared using the keywords var, let, or const.

1. var Keyword

The var keyword is used to declare a variable. It has a function-scoped or globally-scoped behaviour.

var n = 5;
console.log(n);

var n = 20; // reassigning is allowed
console.log(n);

2. let Keyword

The let keyword is introduced in ES6, has block scope and cannot be re-declared in the same scope.


let  n= 10;
n = 20; // Value can be updated
// let n = 15; //can not redeclare
console.log(n)

3. const Keyword

The const keyword declares variables that cannot be reassigned. It's block-scoped as well.

const n = 100;
// n = 200; This will throw an error
console.log(n)

The Variable Name

There are certain rules that apply when naming a variable. Some rules are programming-language specific, others apply to all programming languages:
A variable name cannot contain spaces.
A variable name cannot start with a number.
A variable name cannot be a reserved word like if, else, for, function etc.

Difference between static and non-static variables in Java
In Java, variables are mainly categorized into two main types based on their working and memory allocation, and these two variables are static variables and non-static variables. The main difference between them is listed below:
Static variables: These are variables that are shared among all the instances of a class.
Non-static variables: These are variables that belong to each individual instance of a class.

Java Static Variables

When a variable is declared as static, then a single copy of the variable is created and shared among all objects at a class level. Static variables are essentially, global variables.

// Java program to demonstrate execution
// of static blocks and variables

class Geeks {
    // static variable
    static int a = m1();

    // static block
    static { System.out.println("Inside static block"); }

    // static method
    static int m1()
    {
        System.out.println("from m1");
        return 20;
    }

    public static void main(String[] args)
    {
        System.out.println("Value of a : " + a);
        System.out.println("from main");
    }
}

Output

from m1 Inside static block Value of a : 20 from main

Java Non-static variables

Non-static variables are variables that belongs to a specified object of a class, it is also known as instance variable. These variables are declared outside of a method, constructor or block. Each object created from the class gets its own separate copy of these variables.

// Java program to demonstrates 
// the working of non-static variables

public class Geeks 
{  
    // declaration of non-static variables.
    public String name; 
    String division;
    private int age;    

    // Constructor that initialize non-static variable.
    public Geeks(String sname)  
    {  
        name = sname;  
    }  

    //Method to initialize non-static variable. 
    public void setDiv(String sdiv)  
    {  
        division = sdiv;  
    }  

    public void setAge(int sage)  
    {  
        age = sage;  
    }  

    // Method to display the values
    public void printstud()  
    {  
        System.out.println("Student Name: " + name );  
        System.out.println("Student Division: " + division);   
        System.out.println("Student Age: " + age);  
    }  

    public static void main(String args[])  
    {  
        Geeks g = new Geeks("Monica");  
        g.setAge(14);  
        g.setDiv("B");  
        g.printstud();  
    }  
}

Output
Student Name: Monica Student Division: B Student Age: 14

Data Types

JavaScript supports various datatypes, which can be broadly categorized into primitive and non-primitive types.
Primitive Datatypes

Primitive datatypes represent single values and are immutable.

1. Number: Represents numeric values (integers and decimals).

let n = 42;
let pi = 3.14;

2. String: Represents text enclosed in single or double quotes.

let s = "Hello, World!";

3. Boolean: Represents a logical value (true or false).

let bool= true;

4. Undefined: A variable that has been declared but not assigned a value.

let notAssigned;
console.log(notAssigned);

5. Null: Represents an intentional absence of any value.


let empty = null;

6. Symbol: Represents unique and immutable values, often used as object keys.

let sym = Symbol('unique');

7. BigInt: Represents integers larger than Number.MAX_SAFE_INTEGER.

let bigNumber = 123456789012345678901234567890n;

**
Non-Primitive Datatypes**

Non-primitive types are objects and can store collections of data or more complex entities.

1. Object: Represents key-value pairs.


let obj = {
    name: "Amit",
    age: 25
};

2. Array: Represents an ordered list of values.


let a = ["red", "green", "blue"];

3. Function: Represents reusable blocks of code.


function fun() {
    console.log("GeeksforGeeks");
}

Bits and Bytes in Programming
Bits and bytes are the smallest units of data in a computer.
A bit is a single binary digit, with a value of either 0 or 1.
A byte is a group of 8 bits.

What is a Bit?

A bit is the smallest possible unit of data in a computer.
One bit holds a value of either 0 or 1.
Bits are stored in different ways:

In computer memory, a bit is stored as electrical voltage, where a voltage above a certain threshold represents a 1, and a voltage below that threshold represents a 0.
In hard disk drives, a bit is stored as magnetism, where an area magnetized in one orientation represents a 1, and a magnetized area in the opposite orientation represents a 0.
In CDs, DVDs, and Blu-ray discs, a bit is stored as either a pit, or a flat area. A pit is an area where the surface is lower than the surrounding surface, and that represents a 1. A flat area is when there is no pit, and that represents a 0.

What is a Byte?

A byte is a group of 8 bits, like 10001011 for example.

Each bit can be either 0 or 1, and with 8 bits in a byte, there are 28 = 256 different values a byte can have.

But simply storing just one bit is not very useful. We need to store more bits together to represent larger amounts of data.

Storing Groups of Bytes

Like we have seen, it is possible to use a single byte to store a single character, a number, or a color.

But normally, modern computers use more than one byte to store something.

Data Storage Units

When storing data, we can use different units to measure the size of the data.

In data measurement units, the capital letter "B" is used to represent "byte", and the lower case letter "b" is used to represent "bit".

Storing many bytes, we use units:

Bytes (B)
Kilobytes (kB)
Megabytes (MB)
Gigabytes (GB)
Terabytes (TB)

The International System of Units (SI) defines the prefixes:

kilo- (k), meaning 1 000
mega- (M), meaning 1 000 000
giga- (G), meaning 1 000 000 000
tera- (T), meaning 1 000 000 000 000

Refrence
https://www.geeksforgeeks.org/javascript/javascript-tutorial/
https://www.w3schools.com/programming/prog_binary_numbers.php
https://www.w3schools.com/programming/prog_variables.php
https://www.geeksforgeeks.org/javascript/variables-datatypes-javascript/
https://www.geeksforgeeks.org/java/difference-between-static-and-non-static-variables-in-java/

Java Script

Ezhil Arasan — Wed, 03 Jun 2026 06:23:47 +0000

What Can JavaScript Do?
JavaScript is the programming language of the web.
It can calculate, manipulate and validate data.
It can update and change both HTML and CSS.

JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the<head> section of an HTML page, or in both.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

 <!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Java script
JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.
Client Side: On the client side, JavaScript works along with HTML and CSS. HTML adds structure to a web page, CSS styles it, and JavaScript brings it to life by allowing users to interact with elements on the page, such as actions on clicking buttons, filling out forms, and showing animations. JavaScript on the client side is directly executed in the user's browser.
Server Side: On the Server side (on Web Servers), JavaScript is used to access databases, file handling, and security features to send responses, to browsers.

Why Learn JavaScript?
1) Core language for web development, enabling dynamic and interactive features in websites with fewer lines of code.
2) Highly in demand, offering many job opportunities in Frontend, Backend (Node.js), and Full Stack Development.
3) Supports powerful frameworks and libraries like React, Angular, Vue.js, Node.js, and Express.js, widely used in modern web applications.
4) Object-oriented and event-driven language, ideal for building scalable and responsive applications.
5) Cross-platform and runs directly in all modern web browsers without the need for installation.
6) Major companies like Google, Facebook, and Amazon use JavaScript in their tech stacks.

JavaScript Hello World Program

Mostly browsers can run JavaScript directly, so there's no need to install a compiler. However, the built-in browser console isn’t very beginner-friendly. That’s why we’ve added an online editor below to help you get started easily.

console.log("Hello World!");

Refrence
https://www.geeksforgeeks.org/javascript/variables-datatypes-javascript/
https://www.w3schools.com/js/js_whereto.asp

Selectors

Ezhil Arasan — Wed, 03 Jun 2026 06:00:40 +0000

CSS selectors

The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their specificity. The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a NodeList.

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

Selectors
:active :any-link :autofill :buffering :checked :default :defined :dir() :disabled :empty :enabled :first-child :first-of-type :focus :focus-visible :focus-within :fullscreen :future :has() :hover :in-range :indeterminate :interest-source :interest-target :invalid :is() :lang() :last-child :last-of-type :link :matches() (obsolete legacy selector alias for :is()) :modal :muted :not() :nth-child() :nth-of-type() :nth-last-child() :nth-last-of-type() :only-child :only-of-type :open :optional :out-of-range :past :paused :picture-in-picture :placeholder-shown :playing :popover-open :read-only :read-write :required :root :scope :seeking :stalled :target :user-invalid :user-valid :valid :visited :volume-locked :where() :-webkit- pseudo-classes Attribute selectors Class selector ID selectors Type selectors Universal selectors

The CSS selectors module also introduces the :blank, :current, and :local-link pseudo-classes. Currently, no browsers support these features.

Terms
1)Pseudo-class glossary term
2)Functional pseudo-classes
3)Combinators
4)Simple selector
5)Compound selector
6)Complex selector
7)Relative selector
8)Specificity

Media Queries

Ezhil Arasan — Fri, 29 May 2026 02:37:12 +0000

CSS Media Queries
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.
CSS media queries are essential for creating responsive web pages.
The CSS @media rule is used to add media queries to your style sheet.

Media Query Syntax
A media query consists of an optional media-type and one or more media-features, which resolve to either true or false.

@media [not] media-type and (media-feature: value) and (media-feature: value) {
  /* CSS rules to apply */
}

The media-type is optional. However, if you use not, you must also specify a media-type.

The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules.

Meaning of the not and and keywords:

not: This optional keyword inverts the meaning of the entire media query.

and: This keyword combines a media-type and one or more media-features.

CSS Media Types
The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all".

all - Used for all media type devices
print - Used for print preview mode
screen - Used for computer screens, tablets, and smart-phones

CSS Media Features
The media feature specifies a specific characteristic of the device.

Here are some commonly used media features:

max-height - Maximum height of the viewport
min-height - Minimum height of the viewport
height - Height of the viewport (including scrollbar)
max-width - Maximum width of the viewport
min-width - Minimum width of the viewport
width - Width of the viewport (including scrollbar)
orientation - Orientation of the viewport

resolution - Screen resolution
prefers-color-scheme - User's preferred color scheme

Using media queries

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

Media queries are used for the following:
To conditionally apply styles with the CSS @media, @custom-media and @import at-rules.
To target specific media for the <style>, <link>, <source>, and other HTML elements with the media=orsizes=" attributes.
To test and monitor media states using theWindow.matchMedia()and EventTarget.addEventListener() methods.

Syntax

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.
Media types define the broad category of device for which the media query applies: all, print, screen.
The type is optional (assumed to be all) except when using the only logical operator.
Media features describe a specific characteristic of the user agent, output device, or environment:
any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
device-height
device-posture
device-width
display-mode
dynamic-range
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-motion
prefers-reduced-transparency
resolution
scripting
update
video-dynamic-range
width
For example, the hover feature allows a query to check whether the device supports hovering over elements. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.
Logical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.
A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

Targeting media types
Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers:


@media print {
  /* … */
}

You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:


@media screen, print {
  /* … */
}

See media types for the list of available media types. Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just screen, print, and all remaining. To target more specific attributes, use media features instead.

Targeting media features
Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:


@media (hover: hover) {
  /* … */
}

Media features are either range or discrete.

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media print and (orientation: portrait) {
  /* … */
}

Many range features can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1250px:


@media (max-width: 1250px) {
  /* … */
}

Refrence
https://www.w3schools.com/css/css3_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using#syntax

Server/404

Ezhil Arasan — Sat, 23 May 2026 17:43:55 +0000

what is server?
A server is a hardware device or software that processes requests sent over a network and replies to them. A client is the device that submits a request and waits for a response from the server. The computer system that accepts requests for online files and transmits those files to the client is referred to as a server in the context of the Internet.

Server
A Server is a program or a device that provides functionality for called clients which are other programs or devices. This architecture is called the client-server model.

A single overall computation is distributed across multiple processes or devices. Servers can provide various functionalities called services. These services include sharing data or resources among multiple clients or performing computations for a client. Multiple clients can be served by a single server, and a single client can use multiple servers.

Key Characteristics of a Server

Provides Services: Servers perform specific tasks like hosting websites, managing emails, storing files, or running applications. These services can vary depending on the server’s purpose. Each type of server performs a specific, well-defined task and is optimized for that role.
File Server: Stores and lets users share files over a network.
Mail Server: Sends, receives, and stores emails (e.g., Microsoft Exchange, Postfix).
Database Server: Provides database access and handles queries (e.g., MySQL, Oracle).
Game Server: Hosts online multiplayer games and syncs game data between players.
Web Server: Serves web pages to browsers (e.g., Apache, Nginx)

Components of Server
Specific components will differ based on the form factor and function of a given server, but common components are covered here.

Hardware: The dedicated server's central processing unit (CPU) , memory , storage device , network interfaces, and the server chassis are all included in this.

Network Connectivity: Over a local area network (LAN) , wide area network (WAN) , or the internet , server programs connect to the network architecture and communicate with client devices. To offer redundancy and accommodate various network setups, certain server form factors contain several network interfaces.

Server OS: This operating system (OS) was created with a particular kind of client/server environment in mind.

Management and Monitoring Tools: Instruments for remote management and performance monitoring are frequently included with servers.

Server Software: This server software supports a particular use case. Software for email servers, web servers, and database servers are a few examples.

High-Availability Features: High-availability (HA) capabilities are included on some servers to reduce downtime and guarantee continuous operation. This involves having access to numerous storage systems, backup power supply and network interfaces, and configuration management tools that enable automatic failover and load balancing .

Types of Servers and Their Applications

Application Server
These servers host web apps (computer programs that run inside a web browser) allowing users in the network to run and use them preventing the installation of a copy on their own computers. These servers need not be part of the World Wide Web. Their clients are computers with a web browser.

Catalog Server
These servers maintain an index or table of contents of information that can be found across a large distributed network. Distributed networks may include computers, users, files shared on file servers, and web apps. Examples of catalog servers are directory servers and name servers.
Their clients are any computer program that needs to find something on the network. An example can be a domain member attempting to log in, an email client looking for an email address, or a user looking for a file

Communication Server
These servers maintain an environment needed for one communication endpoint to find other endpoints and then communicate with them.
These servers may or may not include a directory of communication endpoints and a presence detection service, depending on the openness and security parameters of the network. Their clients are communication endpoints.

Computing Server
These servers share vast amounts of computing resources which include CPU and random-access memory over a network. Any computer program that needs more CPU power and RAM than a personal computer can probably afford can use these types of servers.
The client must be a networked computer to implement the client–server model which is a necessity.

Database Server
These servers maintain and share any form of database over a network. A database is an organized collection of data with predefined properties that may be displayed in a table.
Clients of these servers are spreadsheets, accounting software, asset management software, or virtually any computer program that consumes well-organized data, especially in large volumes.

Fax Server
These servers share one or more fax machines over a network which eliminates the hassle of physical access. Any fax sender or recipient is the client of these servers.

File Server
Shares files and folders, storage space to hold files and folders, or both, over a network. Networked computers are the intended clients, even though local programs can be clients.

Game Server
These servers enable several computers or gaming devices to play multiplayer games. Personal computers or gaming consoles are their clients.

Mail Server
These servers make email communication possible in the same way as a post office makes snail mail communication possible. Clients of these servers are senders and recipients of email.

Print Server
These servers share one or more printers over a network which eliminates the hassle of physical access. Their clients are computers in need of printing something.

Proxy Server
This server acts as an intermediary between a client and a server accepting incoming traffic from the client and sending it to the server.

Reasons to use a proxy server include content control and filtering, improving traffic performance, preventing unauthorized network access, simply routing the traffic over a large and complex network. Their clients are any networked computer.

Web Server
These servers host web pages. A web server is responsible for making the World Wide Web possible. Each website has one or more web servers. Their clients are computers with a web browser.

404 Not Found
The HTTP 404 Not Found client error response status code indicates that the server cannot find the requested resource. Links that lead to a 404 page are often called broken or dead links and can be subject to link rot.

A 404 status code only indicates that the resource is missing without indicating if this is temporary or permanent. If a resource is permanently removed, servers should send the 410 Gone status instead.

404 errors on a website can lead to a poor user experience for your visitors, so the number of broken links (internal and external) should be minimized to prevent frustration for readers. Common causes of 404 responses are mistyped URLs or pages that are moved or deleted without redirection. For more information, see the Redirections in HTTP guide.

** Custom error page in Apache**
For the Apache server, you can specify a path to a custom 404 page in a .htaccess file. The example below uses notfound.html as a page to show visitors on 404s, although a common approach is to name the file 404.html or 404.php (depending on the server-side technology) at the top-level of the server

- Apache HTTP Server
The Apache HTTP Server is a free, open-source cross-platform web server managed by the Apache Software Foundation. It powers millions of websites globally by processing HTTP requests and delivering content over the internet. It is highly valued for its reliability, flexible configuration, and extensive module support
A fast, reliable, and extensible open-source web server for modern operating systems.

- Flexible configuration — .htaccess per-directory config, virtual hosts, dynamic module loading.
- Security — TLS/SSL, authentication modules, fine-grained access control.
- Performance — event MPM, HTTP/2, content caching, reverse proxy.
- Extensibility — 100+ modules for rewriting, proxying, load balancing, scripting, and more.
- Portability — runs on Linux, Windows, macOS, and most Unix-like systems.

Refrence
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404#custom_error_page_in_apache
https://www.geeksforgeeks.org/computer-networks/what-is-server/
https://httpd.apache.org/

git commands

Ezhil Arasan — Fri, 22 May 2026 15:43:37 +0000

Git status
Status shows, well, the status of your working tree. Specifically, you'll be able to see your current branch, tracked and untracked files, as well as staged and unstaged changes:

So, in the example above we can see that the current branch is master. The main.rb file is already tracked by Git and it has some changes that are not yet staged for commit (we will see how to achieve that a bit later).

Git add
add is probably one of the most common Git commands. So, what operation does it perform? Basically, it updates the index with the content found in your working tree thus making the content staged for the next commit. An index is like a snapshot of your working tree. When you perform a commit, this snapshot is utilized. Therefore, before doing a commit you should perform git add for any files that were modified or created.

In the simplest case you can say:

git add .

This dot . means "take all the files in the working tree" and add them to the index.

However, you can also add individual files and folders as well as use fileglobs

git add single_file.txt
git add my_folder
git add *.rb

So, to summarize: after you have performed some changes in your project, you will need to run git add before doing a commit.

Git commit
commit is one of the most important Git commands as it records the changes to the repository based on the current index (the snapshot that you've created). To perform a new commit and add a small informational message for it, run:

git commit -m "My first commit"

Now all the staged files will be commited and added to the project history. Also, you can use the -a option to automatically stage and then commit all the files that have been modified and deleted:

git commit -am "My first commit"

Unfortunately, this option will ignore untracked files, therefore you will still have to say git add . for these new files.

Git push/pull
Push Git command allows you to send local changes to the remote repository which is usually hosted on services like GitHub, Bitbucket, GitLab, or Azure DevOps repos.

First of all, you will need to actually add information about this remote repository by running something like:

git remote add origin https://github.com/username/repo.git

Usually this command will be supplied to you by the service you're using. What it does? It creates something like a "pointer" to a remote repository that is stored on github.com. This remote repository has an alias origin but you can call it anything you'd like (for example, just github).

Now, when the remote repository is provided, you can push your local changes:
git push origin master

git push origin master

In this example we're taking the contents of the master branch and push it to the remote repository which has an alias origin.

You can also set origin as "upstream" by saying:

git push -u origin master

Now you don't need to provide origin anymore. Just say

git push

However, please note that it will work only for the master branch which was mentioned when creating an upstream — for all other branches you will still have to say:

git push origin another_branch

To grab changes from the remote repository and apply them locally, use:

git pull origin master

This command works in the same way as git push. If you have specified an upstream, you can simply say:

git pull

Please note that merge conflicts might occur and you will need to resolve them manually .

Git clean
Removes untracked files from the working directory. This is the logical counterpart to git reset, which (typically) only operates on tracked files.

Git clone
Creates a copy of an existing Git repository. Cloning is the most common way for developers to obtain a working copy of a central repository.

Git config
A convenient way to set configuration options for your Git installation. You’ll typically only need to use this immediately after installing Git on a new development machine.

Git merge
A powerful way to integrate changes from divergent branches. After forking the project history with git branch, git merge lets you put it back together again.

Git checkout
In addition to checking out old commits and old file revisions, git checkout is also the means to navigate existing branches. Combined with the basic Git commands, it’s a way to work on a particular line of development.

Git reset
Undoes changes to files in the working directory. Resetting lets you clean up or completely remove changes that have not been pushed to a public repository.

Refrence
https://lokalise.com/blog/10-git-commands-for-day-to-day-work/
https://www.atlassian.com/git/glossary#terminology

html command

Ezhil Arasan — Thu, 21 May 2026 16:52:24 +0000

What is command?
A command in computing is a specific instruction given to a computer or software program to perform a particular task. It acts as a direct order, such as telling the system to open a file, delete data, or run a program.

In HTML, "commands" are technically called tags. They are the building blocks used to structure and format web pages.

Basic steps: using tags
HTML uses tags to communicate to the client (browser) how to display text and images. Tags are contained in< >symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag.

For example, to create a title for a document you would do the following:

<title>My First HTML Document</title>

The closing tag normally contains a "/" before the directive to indicate the termination of the action.

HTML tags are not case-sensitive, although URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. However, when you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.

The HTML tag
Although not currently required by all clients, the <html> tag signals the point where text should start being interpreted as HTML code. It's probably a good idea to include it in all your documents now, so you don't have to go back to your files and add it later.

The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.

The head tag
Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively.

For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like


<html>
<head>
<title>My First HTML Document</title>
</head>

Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.

The body tag
Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document.

The body should start after the head. A typical page might begin like

`<html>
<head>
<title>My First HTML Document</title>
</head>
<body>`

<!DOCTYPE html>
<html>
<head>
    <title>Description List</title>
</head>
<body>

<h2>Programming Languages</h2>

<dl>
    <dt>HTML</dt>
    <dd>Used to create web pages</dd>

    <dt>CSS</dt>
    <dd>Used for styling web pages</dd>
</dl>

</body>
</html>

Headers
There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>
Headers, as you notice, not only vary in size(h1,h2,h3,h4,h5), they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).

Paragraphs
In HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it).

`<p>` causes a line break and adds a trailing blank line 
`<br>` causes a line break with no trailing blank line

As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.

Blockquote
The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this:

<blockquote>...</blockquote>

Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.

list

there are three types of lists:
1) ordered lists: <ol>,</ol>
the elements of the list are introduced by <li> (list item)
the end tag </li>is not optional
to change the current label to 30, use <li value="30">
2) unordered lists: <ul>,</ul>
the elements of the list are introduced by <li> (list item)
the end tag </li> is not optional
3) definition lists: <dl>, </dl>
the elements of the list are pairs term-definition introduced by
<dt>(definition term)
<dd>(definition definition)
the end tags </dt> and </dd> are not optional

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List</title>
</head>
<body>

<h2>Subjects</h2>

<ol>
    <li>Maths</li>
    <li>Science</li>
    <li>English</li>
    <li>Computer</li>
</ol>

</body>
</html>

Tables

<table>, </table>: encloses the table
<thead>, </thead>: encloses the table head; this helps the browser display the head on each page, if the table is longer.
<tfoot>, </tfoot>: encloses the footer of the table; it must precede the<tbody> -<tbody>, </tbody>: encloses the body of the table
<tr>, </tr>: table row
<th>, </th>: table header cell; used within <tr>
<td>, </td>: table data cell; used within `

Strike-through

Should you want it, there is a strike-through tag which displays text with a strike.

<strike>This is struck through text</strike>

displays as:

This is struck through text

Addresses
The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. Anything contained within the address tag appears in italics. The address tag is another example of a logical tag, and although it currently does nothing but make text appear in italics, this could change as HTML code advances.

Here is an example of how an address might appear:

`html
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
`

And it would appear as:
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu

Horizontal Rule
To separate sections in a document, you can insert a horizontal rule tag
. A horizontal rule is displayed as follows:
Center

You can center text, images, and headings with the center tag:

<center>This is a centered sentence</center>

The center tag automatically inserts a line break after the closing center tag.

** Image**
<img>
purpose: inline image
example: <img src="../picture.jpg" height="20%" alt="campus map">

Refrence
https://www.apu.ac.jp/~gunarto/html.html
https://www.math.uh.edu/~torok/math_6298/html/commands.html