JavaScript Introduction

Introduction to JavaScript

JavaScript (JS) is a dynamic, high-level, and interpreted programming language that adds interactivity to web pages. It is widely used for frontend and backend development.

1️⃣ What Can JavaScript Do?

✔ Manipulate HTML & CSS – Update page content dynamically.
✔ Handle Events – Respond to user actions like clicks or keypresses.
✔ Validate Forms – Ensure correct user input before submitting data.
✔ Work with APIs – Fetch and display data from servers.
✔ Create Animations – Add interactive motion to elements.
✔ Build Web Apps – Full-fledged applications with frameworks like React, Vue, and Angular.

2️⃣ Adding JavaScript to HTML

✅ Inline JavaScript (not recommended)

<button onclick="alert('Hello, World!')">Click me</button>

✅ Internal JavaScript (inside `<script>` tags)

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <button id="btn">Click me</button>
    <script>
        document.getElementById("btn").addEventListener("click", function() {
            alert("Hello, World!");
        });
    </script>
</body>
</html>

✅ External JavaScript (Best Practice)

Save the JavaScript in a separate file (script.js) and link it in HTML.

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

🔹 Benefit: Keeps HTML clean and allows code reuse.

3️⃣ Variables in JavaScript

JavaScript uses three keywords for declaring variables:

Keyword	Scope	Can Reassign?	Can Redeclare?
`var`	Function-scoped	✅ Yes	✅ Yes
`let`	Block-scoped	✅ Yes	❌ No
`const`	Block-scoped	❌ No	❌ No

✅ Example:

var x = 10; // Global
let y = 20; // Block-scoped
const z = 30; // Cannot be changed

y = 25; // Allowed
// z = 35; ❌ ERROR: Cannot reassign const

4️⃣ Data Types in JavaScript

Type	Example
String	`"Hello"` or `'World'`
Number	`42`, `3.14`
Boolean	`true`, `false`
Array	`[1, 2, 3]`
Object	`{name: "John", age: 25}`
Undefined	`let a;` (value not assigned)
Null	`let b = null;` (empty value)

🔹 typeof checks a variable’s type:

console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (Arrays are objects)
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (JavaScript bug)

5️⃣ Operators in JavaScript

Operator	Example	Description
`+`	`5 + 3`	Addition
`-`	`5 - 3`	Subtraction
`*`	`5 * 3`	Multiplication
`/`	`5 / 3`	Division
`%`	`5 % 3`	Modulus (Remainder)
`++`	`x++`	Increment
`--`	`x--`	Decrement

Comparison Operators

Operator	Example	Description
`==`	`5 == "5"`	Equal (loose)
`===`	`5 === "5"`	Equal (strict, checks type)
`!=`	`5 != "5"`	Not equal
`!==`	`5 !== "5"`	Not equal (strict)
`>`	`5 > 3`	Greater than
`<`	`5 < 3`	Less than

6️⃣ Control Structures (if-else, loops)

✅ If-else statement

let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

✅ For Loop

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

✅ While Loop

let count = 0;
while (count < 5) {
    console.log("Count: " + count);
    count++;
}

7️⃣ Functions in JavaScript

✅ Regular Function

function greet(name) {
    return "Hello, " + name + "!";
}

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

✅ Arrow Function (ES6)

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

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

8️⃣ Arrays & Objects

✅ Arrays

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // "Apple"
fruits.push("Orange"); // Add new item
console.log(fruits.length); // 4

✅ Objects

let person = {
    name: "Alice",
    age: 25,
    city: "New York"
};

console.log(person.name); // "Alice"
console.log(person["age"]); // 25

9️⃣ Event Handling (Click Event Example)

<button id="myBtn">Click me</button>

<script>
    document.getElementById("myBtn").addEventListener("click", function() {
        alert("Button Clicked!");
    });
</script>

🔟 JavaScript in the Browser

✔ document.getElementById("id") – Selects an element by ID.
✔ document.querySelector(".class") – Selects the first element with the class.
✔ document.createElement("div") – Creates a new HTML element.
✔ element.innerHTML – Sets or gets HTML content.
✔ element.style.color = "red" – Changes an element’s CSS.

🔹 Summary

✔ JavaScript is used for dynamic, interactive web pages.
✔ Variables are declared with var, let, or const.
✔ Data types include strings, numbers, booleans, arrays, and objects.
✔ Operators perform arithmetic and logical operations.
✔ Control structures (if, loops) control program flow.
✔ Functions perform reusable actions.
✔ Events handle user interactions.

🚀 Want to explore more? Let me know!

Souy Soeng

JavaScript Introduction

Introduction to JavaScript

1️⃣ What Can JavaScript Do?

2️⃣ Adding JavaScript to HTML

✅ Inline JavaScript (not recommended)

✅ Internal JavaScript (inside `<script>` tags)

✅ External JavaScript (Best Practice)

3️⃣ Variables in JavaScript

✅ Example:

4️⃣ Data Types in JavaScript

5️⃣ Operators in JavaScript

Comparison Operators

6️⃣ Control Structures (if-else, loops)

✅ If-else statement

✅ For Loop

✅ While Loop

7️⃣ Functions in JavaScript

✅ Regular Function

✅ Arrow Function (ES6)

8️⃣ Arrays & Objects

✅ Arrays

✅ Objects

9️⃣ Event Handling (Click Event Example)

🔟 JavaScript in the Browser

🔹 Summary

Post a Comment

Souy Soeng

JavaScript Introduction

Introduction to JavaScript

1️⃣ What Can JavaScript Do?

2️⃣ Adding JavaScript to HTML

✅ Inline JavaScript (not recommended)

✅ Internal JavaScript (inside <script> tags)

✅ External JavaScript (Best Practice)

3️⃣ Variables in JavaScript

✅ Example:

4️⃣ Data Types in JavaScript

5️⃣ Operators in JavaScript

Comparison Operators

6️⃣ Control Structures (if-else, loops)

✅ If-else statement

✅ For Loop

✅ While Loop

7️⃣ Functions in JavaScript

✅ Regular Function

✅ Arrow Function (ES6)

8️⃣ Arrays & Objects

✅ Arrays

✅ Objects

9️⃣ Event Handling (Click Event Example)

🔟 JavaScript in the Browser

🔹 Summary

Post a Comment

✅ Internal JavaScript (inside `<script>` tags)