✨ Introduction to JavaScript

🌐 What is JavaScript?

JavaScript is a versatile, high-level programming language used primarily to make websites interactive and dynamic. Originally developed for the web, it now powers everything from client-side scripts to full backend applications with frameworks like Node.js.


πŸ”€ Basic Syntax and Rules

1. Variables

let name = "Doby";      // Changeable
const age = 20;         // Constant
var isHappy = true;     // Legacy (less used now)

2. Data Types

let text = "hello";      // String
let number = 10;         // Number
let isCool = true;       // Boolean
let empty = null;        // Null
let notDefined;          // Undefined
let person = { name: "Doby", age: 20 }; // Object

πŸ” Logic and Control Flow

1. Conditionals

if (name.toLowerCase() === "doby") {
    console.log("Welcome back, Doby!");
} else if (name === "Guest") {
    console.log("Hello, Guest!");
} else {
    console.log("Access denied.");
}

2. Loops

For Loop

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

While Loop

let count = 0;
while (count < 3) {
    console.log("Counting:", count);
    count++;
}

πŸ”§ Functions

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Doby"));

Arrow function version:

const greet = (name) => `Hello, ${name}!`;

🧱 Core Data Structures

Arrays

let colors = ["red", "green", "blue"];
colors.push("purple");
console.log(colors[0]);

Objects

let person = {
    name: "Doby",
    age: 25
};
console.log(person.name);

πŸ“¦ JSON and Local Storage

Convert to JSON and back:

let user = { name: "Doby", role: "Dev" };
let jsonStr = JSON.stringify(user);
let parsed = JSON.parse(jsonStr);
console.log(parsed.name);

Using Local Storage:

localStorage.setItem("user", JSON.stringify(user));
let saved = JSON.parse(localStorage.getItem("user"));

πŸ–±οΈ DOM Manipulation

document.getElementById("title").textContent = "Hello Doby!";

Add event listener:

document.querySelector("button").addEventListener("click", () => {
    alert("Button clicked!");
});

πŸ“¦ Node.js and Modules

// greet.js
export function greet(name) {
    return `Hello, ${name}`;
}

// app.js
import { greet } from './greet.js';
console.log(greet("Doby"));

πŸ“˜ Learning Resources


πŸ’‘ Final Thoughts

JavaScript brings life to the webβ€”hover effects, sliders, interactive apps, even full backend APIs. With just one language, you can build both the front and back of entire websites.

Take your time. Play with it. And make the web a little more you.

You’ve got this!