❖ 1. ស្គាល់ដំបូងអំពី JavaScript

1.1 JavaScript គឺជាអ្វី រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

JavaScript ជាភាសាកម្មវិធីតែមួយគត់ដែលកម្មវិធីរុករក (Browser) ស្គាល់ដោយផ្ទាល់។ HTML ស្ថាបនារចនាសម្ព័ន្ធ, CSS តុបតែងរូបរាង, ចំណែក JavaScript ធ្វើឲ្យទំព័រមាន "ជីវិត" (អន្តរកម្ម, ការគណនា, ការផ្លាស់ប្តូរដោយស្វ័យប្រវត្តិ)។ បច្ចុប្បន្នវាក៏ប្រើនៅខាង Backend (Node.js), Mobile App, និង Desktop App ផងដែរ។

1.2 របៀបភ្ជាប់ JavaScript ទៅកាន់ HTML រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<script>
  console.log("សួស្តី JavaScript!");
</script>

1.3 Console (កន្លែងសាកល្បងកូដ) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

console.log() បោះពុម្ពតម្លៃចេញទៅ Console របស់ Browser (បើក DevTools ដោយចុច F12) ជាឧបករណ៍ដ៏សំខាន់បំផុតសម្រាប់ពិនិត្យមើលថាកូដដំណើរការត្រឹមត្រូវដែរឬអត់។

console.log("តម្លៃមួយ");
console.log(10 + 5);
console.log("អាយុ:", 25);

❖ 2. អថេរ និងប្រភេទទិន្នន័យ

2.1 let, const, var (បីវិធីប្រកាសអថេរ) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

let city = "ភ្នំពេញ";
const pi = 3.14159;

city = "សៀមរាប";  // ធ្វើបាន ព្រោះជា let
// pi = 3.2;      // Error! ព្រោះជា const

2.2 ប្រភេទទិន្នន័យសំខាន់ៗ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

console.log(typeof 10);        // "number"
console.log(typeof "សួស្តី");   // "string"
console.log(typeof true);      // "boolean"

2.3 Template Literals (ការតភ្ជាប់អត្ថបទបែបទំនើប) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ប្រើសញ្ញា Backtick (`) ជំនួសសញ្ញាសម្រង់ធម្មតា ដើម្បីបញ្ចូលអថេរដោយផ្ទាល់ក្នុងអត្ថបទតាមរយៈ ${...}។

const name = "សុភា";
const age = 22;

console.log(`ខ្ញុំឈ្មោះ ${name} អាយុ ${age} ឆ្នាំ`);

លទ្ធផល៖ ខ្ញុំឈ្មោះ សុភា អាយុ 22 ឆ្នាំ

❖ 3. ប្រមាណវិធី និងលក្ខខណ្ឌ

3.1 Arithmetic & Comparison Operators រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

console.log(5 == "5");   // true  (ប្រៀបធៀបតែតម្លៃ)
console.log(5 === "5");  // false (ប្រភេទខុសគ្នា: number vs string)

3.2 if / else if / else រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const score = 75;

if (score >= 90) {
  console.log("និទ្ទេស A");
} else if (score >= 70) {
  console.log("និទ្ទេស B");
} else {
  console.log("និទ្ទេស C");
}

3.3 Ternary Operator & Logical Operators រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const age = 20;
const status = age >= 18 ? "ពេញវ័យ" : "អនីតិជន";
console.log(status);

const hasTicket = true;
if (age >= 18 && hasTicket) {
  console.log("អនុញ្ញាតឲ្យចូល");
}

❖ 4. រង្វិលជុំ (Loops)

4.1 for Loop រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

for (let i = 1; i <= 5; i++) {
  console.log(`ជុំទី ${i}`);
}

4.2 while & do...while រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

let battery = 100;
while (battery > 0) {
  console.log(`ថ្ម: ${battery}%`);
  battery -= 25;
}

4.3 for...of & for...in រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const fruits = ["ស្វាយ", "ចេក", "ឪឡឹក"];
for (const fruit of fruits) {
  console.log(fruit);
}

❖ 5. Functions

5.1 Function Declaration & Function Expression រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

// Function Declaration
function greet(name) {
  return `សួស្តី ${name}`;
}

// Function Expression
const greet2 = function(name) {
  return `សួស្តី ${name}`;
};

console.log(greet("សុខា"));

5.2 Arrow Functions រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Arrow Function ជាទម្រង់ខ្លីជាង សរសេរដោយប្រើសញ្ញា => ពេញនិយមណាស់ក្នុងកូដទំនើប។

const add = (a, b) => a + b;
console.log(add(3, 5));

// បើមានតែ parameter មួយ អាចលុបវង់ក្រចកចេញបាន
const square = x => x * x;
console.log(square(4));

5.3 Default Parameters & Scope រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

function greet(name = "ភ្ញៀវ") {
  console.log(`សួស្តី ${name}`);
}

greet();          // សួស្តី ភ្ញៀវ
greet("ដារា");     // សួស្តី ដារា

❖ 6. Arrays & Array Methods

6.1 ការបង្កើត និងកែប្រែ Array រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const fruits = ["ស្វាយ", "ចេក", "ឪឡឹក"];
fruits.push("ក្រូច");        // បន្ថែមទៅចុង
fruits.pop();               // លុបធាតុចុងក្រោយ
console.log(fruits[0]);     // ស្វាយ
console.log(fruits.length); // 3

6.2 Array Methods ដែលប្រើញឹកញាប់ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
console.log(doubled);          // [2, 4, 6, 8, 10]

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);            // [2, 4]

const sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum);              // 15

❖ 7. Objects

7.1 ការបង្កើត និងចូលប្រើ Object រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const student = {
  name: "សុវណ្ណ",
  age: 20,
  skills: ["HTML", "CSS", "JavaScript"]
};

console.log(student.name);      // Dot notation
console.log(student["age"]);    // Bracket notation

student.age = 21;                // កែប្រែតម្លៃ
student.school = "សាកលវិទ្យាល័យ"; // បន្ថែម Property ថ្មី

7.2 Object Methods & Destructuring រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const person = {
  name: "លីណា",
  greet() {
    console.log(`សួស្តី ខ្ញុំឈ្មោះ ${this.name}`);
  }
};
person.greet();

// Destructuring ទាញយក Property ចេញជាអថេរដោយផ្ទាល់
const { name, age } = student;
console.log(name, age);

❖ 8. DOM Manipulation

8.1 ការជ្រើសរើស Element រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

DOM (Document Object Model) ជា "ផែនទី" របស់ទំព័រ HTML ដែល JavaScript អាចចូលទៅអាន ឬកែប្រែបាន។

const title = document.querySelector("h1");
const allButtons = document.querySelectorAll("button");

console.log(title.textContent);

8.2 ការកែប្រែខ្លឹមសារ និងរចនាប័ទ្ម រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const box = document.querySelector(".box");
box.textContent = "អត្ថបទថ្មី";
box.style.color = "blue";
box.classList.add("active");
box.classList.toggle("hidden");

❖ 9. Events & Forms

9.1 addEventListener រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const button = document.querySelector("#myButton");

button.addEventListener("click", function() {
  console.log("ប៊ូតុងត្រូវបានចុច!");
});

// ឬសរសេរខ្លីជាងជាមួយ Arrow Function
button.addEventListener("click", () => alert("សួស្តី!"));

9.2 ការគ្រប់គ្រង Form រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

const form = document.querySelector("form");

form.addEventListener("submit", function(event) {
  event.preventDefault();  // ការពារកុំឲ្យទំព័រ Reload
  const nameInput = document.querySelector("#name").value;
  console.log(`បានបញ្ជូនឈ្មោះ: ${nameInput}`);
});

❖ 10. Asynchronous JavaScript

10.1 Callback vs Promise រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Asynchronous ជាការធ្វើកិច្ចការចំណាយពេលយូរ (ឧ. ហៅ API) ដោយមិនកាត់ផ្តាច់ការដំណើរការទំព័រនៅសល់។ Promise ជាទម្រង់ទំនើបជាង Callback សម្រាប់គ្រប់គ្រងលទ្ធផលនាពេលអនាគត។

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("ទិន្នន័យបានមកដល់!");
  }, 2000);
});

promise.then(result => console.log(result));

10.2 async / await រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

async/await ជាទម្រង់ខ្លីជាង និងអានងាយជាង .then() ដោយសរសេរកូដ Asynchronous ឲ្យមើលទៅដូចកូដធម្មតា (Synchronous)។

async function fetchData() {
  console.log("កំពុងទាញយក...");
  const result = await promise;
  console.log(result);
}

fetchData();

10.3 fetch() (ការហៅ API) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

async function getUsers() {
  const response = await fetch("https://api.example.com/users");
  const data = await response.json();
  console.log(data);
}

getUsers();