JavaScript සම්පූර්ණ පාඩම සිංහලෙන්

1. JavaScript (JS) යනු කුමක්ද?

ඔබ HTML සහ CSS පාඩම් මාලා සාර්ථකව නිම කිරීම, වෙබ් නිර්මාණ ලෝකයේ ඔබ තැබූ දැවැන්ත පියවරකි. ඔබ දැන් දන්නවා නිවසක අත්තිවාරම සහ සැකිල්ල (HTML) දමා, එයට තීන්ත ගා අලංකාර (CSS) කරන ආකාරය. දැන්, එම නිවසට විදුලිය, ජලය සහ අනෙකුත් ක්‍රියාකාරී උපාංග (JavaScript) සවිකර එය සැබෑ ලෙසම ජීවත් විය හැකි තැනක් බවට පත් කරන වෙලාවයි.

JavaScript යනු වෙබ් පිටු ගතික (Dynamic) සහ ක්‍රියාකාරී (Interactive) කිරීමට යොදාගන්නා, ලොව ජනප්‍රියම programming භාෂාවකි. වෙබ් බ්‍රව්සරය තුළ සෘජුවම ක්‍රියාත්මක වන එකම ප්‍රධාන භාෂාවද මෙයයි.

HTML වලට JS එකතු කරන්නේ කෙසේද?

ප්‍රධාන වශයෙන් External ක්‍රමය භාවිතා කරන අතර, <script> ටැගය </body> ටැගයට මදක් ඉහළින් යෙදීම වඩාත් සුදුසුය. මන්ද, HTML පිටුවේ ඇති සියලුම කොටස් බ්‍රව්සරය විසින් load කර අවසන් වූ පසුව JavaScript ක්‍රියාත්මක වීම මගින් අනවශ්‍ය දෝෂ (errors) වළක්වා ගත හැක.

<!-- HTML body එකේ අවසානයේ -->
    <script src="script.js"></script>
</body>

Pro Tip: <script defer src="script.js"></script> ලෙස `defer` attribute එක යෙදීමෙන්, JS ගොනුව download වන අතරතුර HTML පිටුව load වීම නතර නොවේ. මෙය වෙබ් පිටුවේ වේගය (performance) වැඩි කිරීමට උපකාරී වේ.

2. JavaScript හි මූලික අත්තිවාරම

ඕනෑම programming භාෂාවක් මෙන්, JS වලටද ආවේණික වූ මූලික සංකල්ප කිහිපයක් ඇත.

Variables (විචල්‍යයන්)

දත්ත තාවකාලිකව ගබඩා කර තබාගැනීමට විචල්‍යයන් යොදාගනී. නූතන JS වලදී let (අගය වෙනස් කළ හැකි) සහ const (අගය වෙනස් කළ නොහැකි නියතයන්) භාවිතා කරයි.

let userName = "සුනිල්"; // String (අක්ෂර)
let userAge = 30; // Number (සංඛ්‍යා)
const hasSubscribed = true; // Boolean (සත්‍ය/අසත්‍ය)

userName = "කමල්"; // 'let' මගින් සෑදූ විචල්‍යයක අගය වෙනස් කළ හැක
// hasSubscribed = false; // Error! 'const' මගින් සෑදූ විචල්‍යයක අගය වෙනස් කළ නොහැක

Data Types (දත්ත වර්ග)

JS වල ප්‍රධාන දත්ත වර්ග කිහිපයක් ඇත:

• String: උඩු කොමා (" " හෝ ' ') තුළ ඇති ඕනෑම අක්ෂර.
• Number: දශම සහ පූර්ණ සංඛ්‍යා.
• Boolean: true හෝ false යන අගයන් දෙක පමණි.
• Array: එකම විචල්‍යයක් තුළ දත්ත ලැයිස්තුවක් ගබඩා කිරීමට. (උදා: let fruits = ["කෙසෙල්", "අඹ", "දොඩම්"];)
• Object: යම් දෙයක් පිළිබඳව ගුණාංග කිහිපයක් (key-value pairs) එකට ගබඩා කිරීමට. (උදා: let person = { name: "නිමල්", age: 40 };)

Functions (ශ්‍රිත)

කිසියම් කාර්යයක් ඉටු කරන, නැවත නැවත භාවිත කළ හැකි කේත කොටසකි. ශ්‍රිතයකට දත්ත (parameters) ලබාදී, එම දත්ත අනුව යම් ප්‍රතිඵලයක් (return value) නැවත ලබාගත හැක.

// 'name' නමින් parameter එකක් ලබාගන්නා ශ්‍රිතයක්
function greetUser(name) {
  let greeting = "ආයුබෝවන්, " + name + "!";
  return greeting;
}

// ශ්‍රිතය call කර ප්‍රතිඵලය විචල්‍යයකට ලබාගැනීම
let message = greetUser("සමන්"); // message = "ආයුබෝවන්, සමන්!"
console.log(message); // බ්‍රව්සරයේ console එකේ පෙන්වයි

ES6 Arrow Functions: ශ්‍රිත ලිවීමට ඇති කෙටි සහ නූතන ක්‍රමයකි.

const add = (a, b) => {
  return a + b;
};

// තවත් කෙටියෙන්:
const subtract = (a, b) => a - b;

console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6

3. Logic සහ Control Flow

වැඩසටහනක් තුළ තීරණ ගැනීම සහ කාර්යයන් නැවත නැවත සිදුකිරීම සඳහා මෙම සංකල්ප අත්‍යවශ්‍ය වේ.

Operators (ක්‍රියාකරුවන්)

• Arithmetic: +, -, *, /, % (modulus)
• Comparison: == (අගය සමානද?), === (අගය සහ වර්ගය යන දෙකම සමානද?), !=, !==, >, <
• Logical: && (AND), || (OR), ! (NOT)

Conditional Statements (if...else)

කිසියම් කොන්දේසියක් සත්‍ය නම් එක් කේත කොටසක්ද, අසත්‍ය නම් තවත් කොටසක්ද ක්‍රියාත්මක කිරීමට යොදාගනී.

let hour = 14;

if (hour < 12) {
  console.log("සුභ උදෑසනක්!");
} else if (hour < 18) {
  console.log("සුභ සන්ධ්‍යාවක්!");
} else {
  console.log("සුභ රාත්‍රියක්!");
}
// Output: සුභ සන්ධ්‍යාවක්!

Loops (පුනරාවර්තන)

එකම කාර්යය කිහිප වරක් සිදු කිරීමට Loops යොදාගනී. for loop එක බහුලවම භාවිතා වේ.

// 0 සිට 4 දක්වා මුද්‍රණය කිරීම
for (let i = 0; i < 5; i++) {
  console.log("සංඛ්‍යාව: " + i);
}

let fruits = ["Apple", "Banana", "Cherry"];
// Array එකක ඇති සියලුම අයිතම මුද්‍රණය කිරීම
for (let fruit of fruits) {
  console.log(fruit);
}

4. DOM Manipulation: වෙබ් පිටුව පාලනය කිරීම

JavaScript හි සැබෑම බලය ඇත්තේ වෙබ් පිටුවේ HTML සහ CSS, පරිශීලක ක්‍රියාකාරකම් වලට අනුව තත්‍ය වේලාවේදී (real-time) වෙනස් කිරීමේ හැකියාවයි. මෙය Document Object Model (DOM) හරහා සිදු කරයි.

HTML Elements තෝරාගැනීම

නූතන JS වලදී CSS selectors භාවිතයෙන් elements තෝරාගැනීම ඉතා පහසුය.

• document.querySelector('.my-class'): ලබාදෙන selector එකට ගැලපෙන පළමු element එක තෝරාගනී.
• document.querySelectorAll('.my-class'): ගැලපෙන සියලුම elements ලැයිස්තුවක් (NodeList) ලෙස තෝරාගනී.

const mainTitle = document.querySelector('#main-title');
const allButtons = document.querySelectorAll('.btn');

Elements වල අන්තර්ගතය සහ Styles වෙනස් කිරීම

• element.textContent: Element එකේ text එක පමණක් වෙනස් කරයි.
• element.innerHTML: Element එක තුළට HTML කේත ඇතුළත් කිරීමට.
• element.style.property: CSS style එකක් වෙනස් කිරීමට (උදා: mainTitle.style.color = 'blue';).
• element.classList.add('new-class'): CSS class එකක් එක් කිරීමට.
• element.classList.remove('old-class'): CSS class එකක් ඉවත් කිරීමට.
• element.classList.toggle('active-class'): Class එක ඇත්නම් ඉවත් කිරීමටත්, නැත්නම් එක් කිරීමටත්.

Events (සිදුවීම්) වලට සවන් දීම

Inline onclick attribute එකට වඩා, addEventListener භාවිතා කිරීම වෘත්තීය සහ නම්‍යශීලී ක්‍රමයයි. එමගින් එකම event එක සඳහා කාර්යයන් කිහිපයක් වුවද එක් කළ හැක.

const myButton = document.querySelector('#clickMeButton');

function handleClick() {
  alert('ඔබ නවීන ක්‍රමයට බොත්තම ක්ලික් කළා!');
}

myButton.addEventListener('click', handleClick);

5. සම්පූර්ණ ප්‍රායෝගික උදාහරණය: To-Do List

දැන් අපි ඉගෙනගත් සියල්ල භාවිතා කර, සරල "කළ යුතු දේ ලැයිස්තුවක්" (To-Do List) සාදමු. මෙය JS මූලික සංකල්ප ප්‍රායෝගිකව අත්හදා බැලීමට හොඳම ව්‍යායාමයකි.

HTML ව්‍යුහය (index.html)

ඉහත To-Do List එක සඳහා අවශ්‍ය මූලික HTML සැකිල්ල.

<div class="card p-4 bg-light">
    <h3>My To-Do List</h3>
    <div class="input-group mb-3">
        <input type="text" id="todoInput" class="form-control" placeholder="නව කාර්යයක්...">
        <button class="btn btn-warning" type="button" id="addTodoBtn">එක් කරන්න</button>
    </div>
    <ul id="todoList" class="list-group"></ul>
</div>
<!-- Don't forget to link Bootstrap and your script.js file -->

JavaScript කේතය (script.js)

මෙම කේතය මගින් To-Do List එකේ සම්පූර්ණ ක්‍රියාකාරීත්වය පාලනය කරයි.

// 1. අවශ්‍ය HTML elements තෝරාගෙන විචල්‍යයන්ට දාගැනීම
const todoInput = document.querySelector('#todoInput');
const addTodoBtn = document.querySelector('#addTodoBtn');
const todoList = document.querySelector('#todoList');

// 2. බොත්තම click කළ විට ක්‍රියාත්මක වන function එක
function addTask() {
  // 3. Input field එකේ ඇති text එක ලබාගැනීම
  const taskText = todoInput.value.trim();

  // 4. Input field එක හිස් නැත්නම් පමණක් පහත දේ කිරීම
  if (taskText !== "") {
    // 5. අලුත් list item (li) එකක් නිර්මාණය කිරීම
    const listItem = document.createElement('li');
    listItem.className = 'list-group-item';
    listItem.textContent = taskText;

    // 6. එම අලුත් li එක ul ලැයිස්තුවට එක් කිරීම
    todoList.appendChild(listItem);

    // 7. Input field එක නැවත හිස් කිරීම
    todoInput.value = "";
    todoInput.focus();
  }
}

// 8. බොත්තමට Event Listener එකක් එක් කිරීම
addTodoBtn.addEventListener('click', addTask);

// Bonus: Enter key එක press කළ විටද task එක add වීම
todoInput.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        addTask();
    }
});