📌 Table of Contents**
Introduction:-
- hat Is JavaScript?
- Setting Up Your Environment
- Writing Your First JS Program
- Variables and Data Types
- Operators in JavaScript
- Conditional Statements
- Loops
- Functions
- Arrays and Objects
- DOM Manipulation (Bonus) Final Thoughts** 🧠 1. Introduction JavaScript is one of the most powerful and widely used programming languages in the world. From dynamic websites to powerful apps, JavaScript is the brain behind what happens on your screen.
If you’re a beginner looking to start with web development or programming, this guide will take you through the basics step by step—with real code examples you can try right away.
💡 2. What Is JavaScript?
JavaScript is:
A scripting language used primarily for web development.
One of the core technologies of the web, alongside HTML and CSS.
Used for both client-side (in the browser) and server-side (with Node.js) programming.
Fun Fact: Over 98% of websites use JavaScript!
🛠️ 3. Setting Up Your Environment
You don’t need to install anything complicated. Just use:
A modern browser (like Chrome)
A text editor (like VS Code, Sublime Text, or even Notepad)
Alternatively, try online editors like:
JSFiddle
CodePen
Replit
Create an index.html file and add:
html
Copy
Edit
<!DOCTYPE html>
My First JS
Hello JavaScript!
Then, create a file called script.js.
👨💻 4. Writing Your First JS Program
Inside script.js, write:
javascript
Copy
Edit
console.log("Hello, world!");
Open index.html in your browser and open DevTools (Right-click → Inspect → Console). You’ll see your message!
🧮 5. Variables and Data Types
JavaScript has three ways to declare variables:
javascript
Copy
Edit
var name = "Anjali";
let age = 25;
const isStudent = true;
Data Types
String: "Hello"
Number: 123, 3.14
Boolean: true, false
Null: null
Undefined: a variable with no value yet
Object: { key: "value" }
Array: [1, 2, 3]
➕ 6. Operators in JavaScript
Arithmetic Operators
javascript
Copy
Edit
let a = 10, b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
Comparison Operators
javascript
Copy
Edit
console.log(a == b); // false
console.log(a !== b); // true
console.log(a > b); // true
🔀** 7. Conditional Statements**
javascript
Copy
Edit
let score = 85;
if (score >= 90) {
console.log("A Grade");
} else if (score >= 75) {
console.log("B Grade");
} else {
console.log("Needs Improvement");
}
🔁** 8. Loops**
For Loop
javascript
Copy
Edit
for (let i = 1; i <= 5; i++) {
console.log("Number: " + i);
}
While Loop
javascript
Copy
Edit
let i = 1;
while (i <= 5) {
console.log("Count: " + i);
i++;
}
🔧 9. Functions
javascript
Copy
Edit
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Anjali"); // Output: Hello, Anjali!
Arrow functions:
javascript
Copy
Edit
const add = (a, b) => {
return a + b;
};
console.log(add(10, 20)); // 30
📦 10. Arrays and Objects
Arrays
javascript
Copy
Edit
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // banana
Objects
javascript
Copy
Edit
let student = {
name: "Anjali",
age: 21,
course: "B.Tech"
};
console.log(student.name); // Anjali
🌐 11. DOM Manipulation (Bonus: Make a Button Do Something!)
html
Copy
Edit
Click me!
javascript
Copy
Edit
function showMessage() {
document.getElementById("output").innerHTML = "You clicked the button!";
}
✅ 12. Final Thoughts
JavaScript is not just a language—it’s a gateway to full-stack development, game programming, mobile apps, and even AI in browsers. Once you're confident with basics, you can move on to:
ES6+ advanced features
DOM events
APIs and Fetch
Frameworks like React, Angular, Vue
"**The best way to learn JavaScript is to build projects. Start small, but start today."
Top comments (0)