JavaScript Deep Dive — මොළය

JavaScript (JS) තමයි pages interactive සහ dynamic කරන්නේ.

HTML = structure
CSS = appearance
JS = behavior

JS නැතුව: Static pages content display කරනවා විතරයි
JS එක්ක: Dynamic apps users ට respond කරනවා

Variables: Data Store කරන්න

Variables කියන්නේ information store කරන named containers.

JavaScript

const name = "Alex";      // CONSTANT - change කරන්න බෑ
let age = 25;             // VARIABLE - change කරන්න පුළුවන්
var old = "legacy";       // OLD WAY - use කරන්න එපා

Keyword

Change වෙනවද?

const

නෑ

let

ඔව්

var

ඔව්

සරල නීතිය

Default එකට const use කරන්න, value change කරන්නම ඕනේ නම් විතරක් let use කරන්න.

Data Types

String (Text/අකුරු)

JavaScript

const greeting = "Hello, World!";
const name = 'Alex';              // Single quotes ත් හරි
const template = `Hello, ${name}`; // Template literal (backticks)

Number (ඉලක්කම්)

JavaScript

const count = 42;
const price = 19.99;
const negative = -10;

Boolean (True/False)

JavaScript

const isLoggedIn = true;   // Log වෙලා ඉන්නවා
const hasError = false;    // Error නෑ

Array (List)

JavaScript

const fruits = ["apple", "banana", "orange"];
 
// Index එකෙන් access කරනවා (0 ඉඳන් පටන් ගන්නවා)
fruits[0];  // "apple"
fruits[1];  // "banana"
fruits.length;  // 3

Object (Properties Collection)

JavaScript

const person = {
    name: "Alex",
    age: 25,
    isStudent: true
};
 
// Properties access කරන්න
person.name;       // "Alex"
person["age"];     // 25

Null සහ Undefined

JavaScript

let nothing = null;        // Intentionally empty
let notDefined;            // undefined (value assign කරලා නෑ)

Functions: Reusable Actions

Functions කියන්නේ tasks perform කරන code blocks.

Function Declaration

JavaScript

function greet(name) {
    return "Hello, " + name + "!";
}
 
// Function එක use කරන්න
greet("Alex");  // Returns: "Hello, Alex!"

Arrow Function (Modern Way)

JavaScript

const greet = (name) => {
    return "Hello, " + name + "!";
};
 
// Short version (simple returns වලට)
const greet = (name) => "Hello, " + name + "!";

Multiple Parameters

JavaScript

function add(a, b) {
    return a + b;
}
 
add(5, 3);  // Returns: 8

Conditionals: තීරණ ගැනීම

If/Else Statement

JavaScript

const age = 18;
 
if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

If/Else If/Else

JavaScript

const score = 85;
 
if (score >= 90) {
    console.log("A grade");
} else if (score >= 80) {
    console.log("B grade");
} else {
    console.log("Need improvement");
}

Comparison Operators

Operator

තේරුම

===

Equal to (strict)

!==

Not equal to

Greater than

Less than

Greater or equal

Less or equal

Logical Operators

JavaScript

// AND - දෙකම true වෙන්න ඕනේ
if (age >= 18 && hasID) {
    console.log("Can enter");
}
 
// OR - එකක් හරි true නම් ඇති
if (isAdmin || isModerator) {
    console.log("Has permissions");
}
 
// NOT - boolean එක reverse කරනවා
if (!isLoggedIn) {
    console.log("Please log in");
}

Loops: ආයේ ආයේ කරන ඒවා

For Loop

JavaScript

for (let i = 0; i < 5; i++) {
    console.log(i);
}
// Output: 0, 1, 2, 3, 4

Breakdown:

let i = 0 — 0 ඉඳන් පටන් ගන්නවා
i < 5 — i 5 ට වඩා අඩු නම් continue කරනවා
i++ — හැම වෙලාවකම i ට 1 add කරනවා

For...of Loop (Arrays වලට)

JavaScript

const fruits = ["apple", "banana", "orange"];
 
for (const fruit of fruits) {
    console.log(fruit);
}
// Output: apple, banana, orange

forEach Method

JavaScript

const numbers = [1, 2, 3];
 
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

DOM Manipulation: Page එක වෙනස් කරන්න

DOM (Document Object Model) කියන්නේ JavaScript එකට HTML පේන සහ manipulate කරන විදිහ.

Elements Select කරන්න

JavaScript

// ID එකෙන් (element එකක් return කරනවා)
const header = document.getElementById("main-header");
 
// Modern way - querySelector
const firstCard = document.querySelector(".card");        // First match
const allCards = document.querySelectorAll(".card");     // All matches

Content Change කරන්න

JavaScript

const title = document.querySelector("h1");
 
// Text change කරන්න
title.textContent = "New Title";
 
// HTML change කරන්න
title.innerHTML = "<span>New</span> Title";

Styles Change කරන්න

JavaScript

const box = document.querySelector(".box");
 
box.style.color = "blue";
box.style.backgroundColor = "white";
box.style.fontSize = "20px";

Classes Change කරන්න

JavaScript

const element = document.querySelector(".card");
 
element.classList.add("active");      // Class එකක් add කරන්න
element.classList.remove("active");   // Class එක remove කරන්න
element.classList.toggle("active");   // Toggle on/off

Event Handling: Users ට Respond කරන්න

Events කියන්නේ users ගන්න actions (clicks, typing, scrolling).

addEventListener Method

JavaScript

const button = document.querySelector("button");
 
button.addEventListener("click", () => {
    alert("Button click කළා!");
});

Common Events

Event

Trigger වෙන්නේ

click

Element click කළාම

submit

Form submit කළාම

input

Input value change වෙනකොට

keydown

Key එකක් press කළාම

mouseover

Mouse element එකට ගියාම

load

Page finish loading වුනාම

Example: Form Handling

JavaScript

const form = document.querySelector("form");
const input = document.querySelector("input");
 
form.addEventListener("submit", function(event) {
    event.preventDefault();  // Page refresh එක stop කරනවා
    console.log("Input value:", input.value);
});

හැම එකම එකතු කරලා

JavaScript

// Counter App Logic
 
// Elements ගන්නවා
const countDisplay = document.getElementById("count");
const plusBtn = document.getElementById("plus");
const minusBtn = document.getElementById("minus");
 
// Counter initialize කරනවා
let count = 0;
 
// Display update කරන function එක
function updateDisplay() {
    countDisplay.textContent = count;
    
    // Value එක අනුව color change කරනවා
    if (count > 0) {
        countDisplay.style.color = "green";
    } else if (count < 0) {
        countDisplay.style.color = "red";
    } else {
        countDisplay.style.color = "black";
    }
}
 
// Event listeners
plusBtn.addEventListener("click", () => {
    count++;
    updateDisplay();
});
 
minusBtn.addEventListener("click", () => {
    count--;
    updateDisplay();
});

Lesson Summary

Variables

const constants වලට, let changeable values වලට

Data Types

String, Number, Boolean, Array, Object, null, undefined

Functions

JavaScript

function name(params) { return value; }
const name = (params) => value;

Conditionals

JavaScript

if (condition) { } else if (condition) { } else { }

Loops

JavaScript

for (let i = 0; i < n; i++) { }
for (const item of array) { }
array.forEach(item => { });

DOM

Select: document.querySelector()
Modify: .textContent, .innerHTML, .style
Classes: .classList.add/remove/toggle()

Events

JavaScript

element.addEventListener("event", () => { });

📝 Quiz

1/4

'const' vs 'let' use කරන්නේ කවදද?

Next Up

Lesson 2.5: Browser DevTools
Most powerful debugging tool එක use කරන්න ඉගෙන ගමු!