1. What is JavaScript?

JavaScript is a programming language used to make websites interactive and dynamic.

👉 In simple terms:
JavaScript = behavior + action on a website

2. Why JavaScript is Important

JavaScript helps you:

Add interactivity (buttons, clicks, forms)
Validate user input (e.g., login forms)
Create animations
Update content without refreshing the page
Build web apps (e.g., dashboards, chat apps)

3. How JavaScript Works on a Web Page

👉 Think of it like this:

HTML → Structure
CSS → Design
JavaScript → Action

4. How to Add JavaScript to HTML

a. Inside HTML (Internal)


<script>
alert("Hello World!");
</script>

b. External File (Best Practice)


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

5. Your First JavaScript Code


alert("Welcome to JavaScript!");

👉 This displays a popup message.

6. Variables (Storing Data)


let name = "John";
let age = 20;

👉 Variables store information.

7. Data Types (Basic)

String → "Hello"
Number → 10
Boolean → true / false

8. Functions (Reusable Code)


function greet() {
    alert("Hello!");
}

👉 Call it:


greet();

9. Events (User Actions)

JavaScript responds to user actions like clicks.


<button onclick="sayHello()">Click Me</button>

<script>
function sayHello() {
    alert("You clicked the button!");
}
</script>

10. DOM (Document Object Model)

DOM allows JavaScript to control HTML.

Example:


document.getElementById("demo").innerHTML = "Hello World!";

👉 This changes content on a page.

11. Conditional Statements (Decision Making)


let age = 18;

if (age >= 18) {
    alert("You are an adult");
} else {
    alert("You are underage");
}

12. Loops (Repeating Tasks)


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

13. Real-Life Uses of JavaScript

Login forms
Online payments
Chat applications
Interactive quizzes
Social media features
Animations and sliders

14. Simple Practical Example


<!DOCTYPE html>
<html>
<body>

<h2 id="text">Hello</h2>

<button onclick="changeText()">Click Me</button>

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

</body>
</html>

👉 When clicked, the text changes.

15. Beginner Tools to Practice

Browser (Chrome)
VS Code
Notepad

16. Simple Summary

👉 JavaScript makes websites:

Interactive
Responsive to users
Smart and dynamic

Power Teaching Line (for your class)

👉 “HTML gives structure, CSS gives beauty, but JavaScript gives life to your website.”

PALACE TECH HUB

Friday, March 27, 2026

Basic Understanding of JavaScript (For Beginners)