Creating a login page using HTML,CSS,JS

 

JavaScript Full Guide 

1. What is JavaScript?

JavaScript (JS) is a programming language used to make websites interactive.

If a website is:

• Just text → HTML
• Styled → CSS
• Interactive (clicks, animations, login, updates) → JavaScript

 Example:

• Clicking a button
• Showing popup messages
• Validating login form
• Updating content without refreshing page

JavaScript runs inside the browser (Chrome, Firefox, etc.).

2. How JavaScript Works

When a user opens a website:

1. HTML loads (structure)
2. CSS loads (design)
3. JavaScript runs (logic & actions)

JavaScript is like the brain of the website

3. Where to Write JavaScript?

There are 3 ways:

1. Inside HTML file

<script>
  console.log("Hello JavaScript");
</script>

2. External file (best practice)

<script src="script.js"></script>

3. Inline (not recommended)

<button onclick="alert('Hi')">Click</button>

4. Variables (Storing Data)

Variables are used to store values.

let name = "Abhi";
let age = 18;

console.log(name);
console.log(age);

Types of variables:

• let → can change value
• const → cannot change value
• var → old (avoid using)

5. Data Types (Types of Values)

JavaScript supports:

1. String

let name = "Hello";

2. Number

let age = 20;

3. Boolean

let isStudent = true;

4. Array (list)

let marks = [80, 90, 85];

5. Object (grouped data)

let student = {
  name: "Abhi",
  age: 20
};

6. Operators (Math & Logic)

Arithmetic:

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2

Comparison:

console.log(10 > 5); // true
console.log(10 == 10); // true

7. Conditions (Decision Making)

Used when we want to make decisions.

let age = 18;

if (age >= 18) {
  console.log("You can vote");
} else {
  console.log("Not eligible");
}

Think like: “If this happens → do this”

8. Loops (Repeat Work)

For loop:

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

Output: 1 2 3 4 5

9. Functions (Reusable Code)

Functions help avoid repeating code.

function greet() {
  console.log("Hello Student!");
}

greet();
greet();

 You can call it anytime.

10. Arrays (Working with Lists)

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]); // Apple

Useful methods:

fruits.push("Orange"); // add
fruits.pop(); // remove last

11. Objects (Real-life data)

let student = {
  name: "Abhi",
  age: 20,
  course: "CSE"
};

console.log(student.name);

 Used in real applications like user profiles.

12. DOM (Most Important Concept)

DOM = Document Object Model
It means JavaScript can change HTML content.

Example:

<p id="text">Hello</p>
<button onclick="changeText()">Click</button>

<script>
function changeText() {
  document.getElementById("text").innerHTML = "Text Changed!";
}
</script>

This is how websites become interactive.

13. Events (User Actions)

Events happen when user interacts.

Examples:

• click
• hover
• input
• submit

function show() {
  alert("Button clicked!");
}