✅ What is JavaScript?
JavaScript is a programming language used to make websites interactive and dynamic.
👉 Without JavaScript:
- Website = Static (only text, images)
👉 With JavaScript:
- Buttons respond
- Forms validate
- Animations work
- Data updates without reload
📌 Example:
<button onclick="alert('Hello!')">Click Me</button>📜 History of JavaScript
- Created in 1995 by Brendan Eich
- Developed at Netscape
- Initially called Mocha, then LiveScript
- Finally named JavaScript
👉 Important:
- JavaScript is NOT Java
- Name was for marketing 😄
📈 Today:
- Runs in browsers
- Also runs on servers (Node.js)
⚔️ JavaScript vs HTML vs CSS
| Technology | Purpose |
|---|---|
| HTML | Structure (Skeleton) |
| CSS | Design (Styling) |
| JavaScript | Behavior (Brain) |
👉 Example:
<h1>Hello</h1> <!-- HTML -->
<style>h1{color:red}</style> <!-- CSS -->
<script>alert('Hi')</script> <!-- JavaScript -->🌐 How JavaScript Works in Browser
- Browser loads HTML
- Parses HTML → creates DOM
- Loads CSS
- Executes JavaScript
👉 JavaScript can:
- Change HTML
- Change CSS
- Handle events
📌 Example:
<p id="demo">Hello</p><script>
document.getElementById("demo").innerHTML = "Changed!";
</script>⚙️ JavaScript Engines
JavaScript engine = program that runs JS code
Popular Engines:
- V8 → Chrome, Edge
- SpiderMonkey → Firefox
- JavaScriptCore → Safari
👉 What engine does:
- Reads code
- Converts to machine code
- Executes fast
🧪 Writing First JavaScript Program
👉 Example:
console.log("Hello, World!");📌 Output:
- Appears in browser console
👉 Another example:
alert("Welcome to JavaScript!");🔗 Adding JavaScript to HTML
There are 3 ways:
1️⃣ Inline JavaScript
👉 JS written inside HTML tag
<button onclick="alert('Clicked!')">Click</button>📌 Use:
- Small actions
❌ Not recommended for large projects
2️⃣ Internal JavaScript
👉 JS written inside <script> tag
<!DOCTYPE html>
<html>
<head>
</head>
<body><script>
alert("Internal JS");
</script></body>
</html>📌 Best for:
- Small to medium scripts
3️⃣ External JavaScript
👉 JS in separate .js file
HTML:
<script src="script.js"></script>script.js:
alert("External JS");📌 Best for:
- Large projects
- Clean code
- Reusability
🚀 Summary
- JavaScript makes websites interactive
- Works with HTML & CSS
- Runs inside browser using engines
- Can be added in 3 ways:
- Inline
- Internal
- External (best practice)
