មូលដ្ឋាន JavaScript

សេចក្តីផ្តើម

មេរៀននេះនឹងណែនាំអ្នកអំពីគោលការណ៍មូលដ្ឋានរបស់ JavaScript ដែលជាមូលដ្ឋានសំខាន់សម្រាប់ការសរសេរកូដប្រកបដោយប្រសិទ្ធភាព។ យើងនឹងសិក្សាអំពី syntax, comments, console, alert, DOM manipulation និង styling។

---

១. សញ្ញាចំណុចក្បៀស (Semicolon)

ក្នុង JavaScript រាល់ statement គួរតែបញ្ចប់ដោយសញ្ញាចំណុចក្បៀស ; ដើម្បីបញ្ចប់ការប្រតិបត្តិការមួយ។

ហេតុអ្វីត្រូវប្រើ Semicolon? 🤔

• ភាពច្បាស់លាស់: ធ្វើឱ្យកូដងាយស្រួលអាន និងយល់
• ជៀសវាងកំហុស: ការលុប semicolon អាចបង្កជាបញ្ហានៅពេល minify code
• Best Practice: ជាគោលការណ៍ល្អក្នុងការសរសេរកូដ
• ASI (Automatic Semicolon Insertion): JavaScript បន្ថែមដោយស្វ័យប្រវត្តិ ប៉ុន្តែពេលខ្លះអាចមានបញ្ហា

ឧទាហរណ៍

// ល្អ - មាន semicolon ✅
let name = "សុខា";
console.log(name);
alert("Hello");

// មិនល្អ - គ្មាន semicolon ⚠️
let age = 25
console.log(age)
alert("Hi")

// អាចបង្កបញ្ហា ❌
let x = 10
[1, 2, 3].forEach(n => console.log(n))
// JavaScript អាន​បន្ត​ជា: let x = 10[1, 2, 3].forEach(...)

ចំណាំ: ទោះបី JavaScript មាន ASI (Automatic Semicolon Insertion) ក៏ដោយ ក៏គួរប្រើ semicolon ជានិច្ចដើម្បីជៀសវាងបញ្ហា!

---

២. វិចារណ៍ (Comments)

Comments គឺជាអត្ថបទដែលមិនត្រូវបាន execute ដោយ browser។ វាមានប្រយោជន៍សម្រាប់:

• 📝 ពន្យល់ដំណើរការកូដ
• 🔍 ជួយ developers ផ្សេងយល់កូដរបស់អ្នក
• 🚫 Disable code ជាបណ្តោះអាសន្ន
• 📚 Documentation

ប្រភេទ Comments

Single-line Comment (មួយបន្ទាត់)

ប្រើសញ្ញា // នៅមុខអត្ថបទ។ អ្វីដែលនៅបន្ទាប់សញ្ញានេះនឹងមិនត្រូវ execute។

// នេះជា comment មួយបន្ទាត់
let x = 5; // ក៏អាចសរសេរបន្ទាប់កូដបានដែរ
// console.log(x); // code នេះមិនរត់

Multi-line Comment (ច្រើនបន្ទាត់)

ប្រើ /* ដើម្បីបើក និង */ ដើម្បីបិទ។ សមរម្យសម្រាប់ពន្យល់វែងៗ។

/* 
នេះជា comment ច្រើនបន្ទាត់
អ្នកអាចសរសេរពន្យល់យ៉ាងលម្អិត
អំពីដំណើរការកូដ
*/

/*
function old() {
  // Disable function ចាស់ៗ
}
*/

Best Practices សម្រាប់ Comments 💡

• ✅ ពន្យល់ WHY (ហេតុអ្វី) មិនមែន WHAT (អ្វី)
• ✅ ធ្វើឱ្យកូដងាយយល់ដោយខ្លួនឯង ប្រើ comments តាមតម្រូវការ
• ✅ Update comments ពេលកែកូដ
• ❌ កុំសរសេរ comments ច្រើនពេក
• ❌ កុំសរសេរ comments ដែលច្បាស់ដោយខ្លួនឯង

// ❌ Bad comment - ច្បាស់ដោយខ្លួនឯង
let age = 25; // កំណត់ age ជា 25

// ✅ Good comment - ពន្យល់ហេតុផល
let age = 25; // អាយុអប្បបរមាសម្រាប់ចុះឈ្មោះ

---

៣. Console

Console គឺជាឧបករណ៍ដ៏មានឥទ្ធិពលសម្រាប់ debugging និងតេស្ត JavaScript code។ វាជួយអ្នកមើលលទ្ធផល និងស្វែងរកកំហុស។

របៀបបើក Console

1. Chrome/Edge: F12 ឬ Ctrl + Shift + J ឬ Right Click → Inspect → Console
2. Firefox: F12 ឬ Ctrl + Shift + K
3. Safari: Enable Developer Menu → Cmd + Option + C

Console Methods

console.log() - បង្ហាញព័ត៌មាន

Method ដែលប្រើញឹកញាប់បំផុត សម្រាប់បង្ហាញតម្លៃ variables, objects, arrays។

console.log("Hello World");
console.log("Age:", 25);
console.log({name: "សុខា", age: 25});

console.error() - បង្ហាញកំហុស

console.error("Error: Something went wrong!");

console.warn() - បង្ហាញការព្រមាន

console.warn("Warning: This feature is deprecated");

console.table() - បង្ហាញជាតារាង

let students = [
  {name: "សុខា", age: 20},
  {name: "ដារា", age: 22}
];
console.table(students);

console.clear() - សម្អាត console

console.clear();

Console ល្អសម្រាប់ 🎯

• 🐛 Debugging - ស្វែងរកកំហុស
• 📊 Testing - តេស្តលទ្ធផល
• ⏱️ Performance - វាស់ performance ដោយ console.time()
• 📝 Logging - record events

Pro Tip: ប្រើ console.log() ជំនួស alert() នៅពេល debugging ព្រោះវាមិន block user interface!

---

៤. alert() Function

alert() function បង្ហាញប្រអប់ផុសចេញមក (popup dialog) ជាមួយសារ។ វាជា built-in function របស់ browser។

Syntax

alert(message);

លក្ខណៈពិសេស

• 🔒 Blocking: Block code execution រហូតដល់អ្នកប្រើចុច OK
• 📱 Modal: Users ត្រូវតែឆ្លើយតបមុនធ្វើអ្វីផ្សេង
• ⚠️ អន្តរកម្មតិចតួច: មានតែ OK button
• 🎨 មិនអាចរចនា: Style ដោយ browser មិនអាចផ្លាស់ប្តូរ

ពេលណាប្រើ alert()?

✅ ល្អសម្រាប់:

• ការសិក្សា និងតេស្តរហ័ស
• បង្ហាញសារសំខាន់ដែលត្រូវការការយកចិត្តទុកដាក់
• Simple notifications

❌ មិនគួរប្រើសម្រាប់:

• Production applications (ប្រើ custom modals ជំនួស)
• បង្ហាញព័ត៌មានច្រើន
• User experience ល្អ (វារំខានដល់អ្នកប្រើប្រាស់)

Alternatives ល្អជាង

// ជំនួស alert ដោយ console.log
console.log("Message");

// ឬប្រើ custom notification
document.getElementById("notification").innerHTML = "Message";

// ឬប្រើ modern libraries
// toastr, SweetAlert, etc.

---

៥. ចាប់ធាតុតាម ID (getElementById)

getElementById() គឺជា method សំខាន់បំផុតមួយសម្រាប់ DOM manipulation។ វាអនុញ្ញាតឱ្យយើងចាប់យកធាតុ HTML ដោយប្រើ ID attribute។

Syntax

document.getElementById(id)

របៀបប្រើ

<div id="myDiv">ខ្លឹមសារ</div>

<script>
  // ចាប់យកធាតុ
  let element = document.getElementById("myDiv");
  
  // អានខ្លឹមសារ
  console.log(element.innerHTML); // "ខ្លឹមសារ"
  
  // ផ្លាស់ប្តូរខ្លឹមសារ
  element.innerHTML = "ខ្លឹមសារថ្មី";
</script>

Properties និង Methods សំខាន់ៗ

innerHTML - ខ្លឹមសារ HTML

element.innerHTML = "<strong>Bold Text</strong>";

textContent - អត្ថបទសុទ្ធ

element.textContent = "Plain text"; // មិន render HTML tags

value - សម្រាប់ form elements

document.getElementById("myInput").value = "text";

classList - គ្រប់គ្រង CSS classes

element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("show");

កំហុសញឹកញាប់ ⚠️

// ❌ ID មិនត្រឹមត្រូវ
document.getElementById("wrongID"); // return null

// ❌ ភ្លេចដាក់ quotes
document.getElementById(myDiv); // error

// ✅ ត្រឹមត្រូវ
document.getElementById("myDiv");

សំខាន់: ID ត្រូវតែ unique (មិនអាចមាន elements ពីរដែលមាន ID ដូចគ្នា)។ ប្រើ getElementsByClassName() ឬ querySelectorAll() សម្រាប់ select ច្រើនធាតុ។

---

៦. រចនាធាតុដោយ JavaScript

JavaScript អាចផ្លាស់ប្តូរ CSS styles របស់ HTML elements ដោយផ្ទាល់តាមរយៈ style property។

Syntax មូលដ្ឋាន

element.style.property = "value";

CSS Properties ក្នុង JavaScript

CSS properties ដែលមាន hyphen (-) ត្រូវផ្លាស់ប្តូរទៅ camelCase:

CSS Property	JavaScript Property
background-color	backgroundColor
font-size	fontSize
border-radius	borderRadius
margin-top	marginTop
text-align	textAlign

ឧទាហរណ៍

let box = document.getElementById("box");

// Single property
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.fontSize = "20px";
box.style.padding = "20px";
box.style.borderRadius = "10px";

// ប្រើ template strings
box.style.cssText = `
  background-color: blue;
  color: white;
  font-size: 20px;
  padding: 20px;
`;

Remove Styles

// លុប style ដោយកំណត់ជា empty string
element.style.backgroundColor = "";

// ឬប្រើ removeProperty
element.style.removeProperty("background-color");

Get Computed Styles

// យក styles ដែល browser បាន render
let styles = window.getComputedStyle(element);
console.log(styles.backgroundColor);
console.log(styles.fontSize);

Best Practices 💡

• ✅ ប្រើ CSS classes ជំនួស inline styles ពេលអាចធ្វើបាន
• ✅ ប្រើ classList សម្រាប់ toggle styles
• ⚠️ Inline styles មាន specificity ខ្ពស់ជាង stylesheet
• ⚠️ ពិបាកក្នុងការ maintain នៅពេលមាន styles ច្រើន

// ❌ មិនល្អ - Inline styles ច្រើន
element.style.color = "red";
element.style.fontSize = "20px";
element.style.fontWeight = "bold";

// ✅ ល្អជាង - ប្រើ CSS class
element.classList.add("highlighted");

/* CSS */
.highlighted {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

---

សេចក្តីសង្ខេប

មេរៀនបន្ទាប់: យើងនឹងសិក្សាយ៉ាងស៊ីជម្រៅអំពី Variables, Data Types និង Operators!