© Khmer Angkor Academy - sophearithput168

Khmer Angkor Academy Logo

ទីតាំង​សរសេរ​កូដ JavaScript

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

JavaScript អាចត្រូវបានសរសេរនៅកន្លែងផ្សេងៗគ្នាក្នុងគេហទំព័រ HTML។ ការយល់ដឹងអំពីទីតាំងទាំងនេះជួយអ្នកជ្រើសរើសវិធីល្អបំផុតសម្រាប់គម្រោងរបស់អ្នក។

មាន ៣ វិធី ក្នុងការសរសេរ JavaScript:

  • Inline JavaScript - នៅក្នុងធាតុ HTML (event attributes)
  • Internal JavaScript - នៅក្នុង <script> tag
  • External JavaScript - នៅក្នុងឯកសារដាច់ដោយឡែក (.js file)

អនុសាសន៍: សម្រាប់គម្រោងធំៗ គួរប្រើ External JavaScript ព្រោះងាយស្រួលក្នុងការគ្រប់គ្រង maintain និង reuse code។

១. Inline JavaScript (នៅក្នុងធាតុ)

Inline JavaScript គឺជាការសរសេរកូដ JavaScript ដោយផ្ទាល់នៅក្នុង HTML attributes របស់ធាតុ។ វាត្រូវបានប្រើជាមួយ event attributes ដូចជា onclick, onmouseover, onload។

គុណសម្បត្តិ ✅

  • ងាយស្រួលសម្រាប់តេស្តរហ័ស
  • មើលឃើញភ្លាមៗថាមាន JavaScript នៅលើធាតុណា
  • ល្អសម្រាប់ prototype តូចៗ

គុណវិបត្តិ ⚠️

  • លំបាកក្នុងការ maintain នៅពេលកូដច្រើន
  • មិនអាច reuse code បាន
  • លាយបញ្ចូលគ្នារវាង HTML និង JavaScript (មិនល្អសម្រាប់ best practices)
  • ពិបាកក្នុងការ debug

ឧទាហរណ៍ Event Attributes ដែលប្រើញឹកញាប់

  • onclick - ពេលចុច
  • ondblclick - ពេលចុចពីរដង
  • onmouseover - ពេល mouse ចូលលើធាតុ
  • onmouseout - ពេល mouse ចេញពីធាតុ
  • onchange - ពេលតម្លៃផ្លាស់ប្តូរ
  • onsubmit - ពេលផ្ញើទម្រង់
  • onload - ពេលទំព័រ load រួច

២. Internal JavaScript (នៅក្នុង <script>)

Internal JavaScript គឺជាការសរសេរកូដនៅក្នុង <script> tag ដោយផ្ទាល់ក្នុងឯកសារ HTML។ Tag នេះអាចដាក់នៅ <head> ឬ <body>។

ទីតាំង <script> Tag

នៅក្នុង <head>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      // JavaScript code ទីនេះ នឹងរត់មុនពេល body load
      function greet() {
        alert("ស្វាគមន៍!");
      }
    </script>
  </head>
  <body>
    <button onclick="greet()">ចុចខ្ញុំ</button>
  </body>
</html>

នៅក្នុង <body> (ណែនាំ):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1 id="title">ចំណងជើង</h1>
    <button onclick="changeTitle()">ផ្លាស់ប្តូរ</button>
    
    <script>
      // JavaScript code ទីនេះ រត់បន្ទាប់ពី HTML elements load រួច
      function changeTitle() {
        document.getElementById("title").innerHTML = "ចំណងជើងថ្មី";
      }
    </script>
  </body>
</html>

គុណសម្បត្តិ ✅

  • មិនចាំបាច់បង្កើតឯកសារថ្មី
  • ល្អសម្រាប់គេហទំព័រតូចៗ
  • កូដទាំងអស់នៅក្នុងឯកសារតែមួយ
  • ងាយស្រួលសម្រាប់ការសិក្សា

គុណវិបត្តិ ⚠️

  • កូដវែងធ្វើឲ្យឯកសារ HTML ធំ
  • មិនអាច reuse code នៅគេហទំព័រផ្សេង
  • Browser មិនអាច cache JavaScript code
  • លំបាកក្នុងការគ្រប់គ្រងគម្រោងធំ

ចំណាំ: ទីតាំង <script> មានសារៈសំខាន់! ប្រសិនបើដាក់នៅ <head> ហើយព្យាយាមប្រើធាតុដែលនៅ <body> អាចមានបញ្ហា។ ដូច្នេះគួរដាក់នៅចុងបំផុតនៃ <body>។

៣. External JavaScript (ឯកសារដាច់ដោយឡែក)

External JavaScript គឺជាការសរសេរកូដក្នុងឯកសារ .js ដាច់ដោយឡែកពី HTML។ នេះជាវិធីល្អបំផុតសម្រាប់គម្រោងធំៗ។

របៀបប្រើ

១. បង្កើតឯកសារ JavaScript (script.js):

// script.js
function showMessage() {
  alert("នេះជាកូដពីឯកសារខាងក្រៅ!");
}

function changeColor() {
  document.body.style.background = "#2196F3";
}

២. ភ្ជាប់ឯកសារនៅក្នុង HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>ឧទាហរណ៍ External JavaScript</h1>
    <button onclick="showMessage()">បង្ហាញសារ</button>
    <button onclick="changeColor()">ផ្លាស់ប្តូរពណ៌</button>
    
    <!-- ភ្ជាប់ឯកសារ JavaScript -->
    <script src="script.js"></script>
  </body>
</html>

ភ្ជាប់ឯកសារពីទីតាំងផ្សេងៗ

<!-- ឯកសារនៅក្នុង folder ដូចគ្នា -->
<script src="script.js"></script>

<!-- ឯកសារនៅក្នុង subfolder -->
<script src="js/script.js"></script>

<!-- ឯកសារនៅខាងក្រៅ folder -->
<script src="../script.js"></script>

<!-- ឯកសារពី URL (CDN) -->
<script src="https://cdn.example.com/library.js"></script>

គុណសម្បត្តិ ✅

  • Separation of Concerns: HTML និង JavaScript ដាច់ដោយឡែក
  • Reusability: អាចប្រើឯកសារដូចគ្នាលើច្រើនទំព័រ
  • Caching: Browser cache ឯកសារ .js ធ្វើឲ្យលឿន
  • Maintainability: ងាយស្រួលគ្រប់គ្រង និង debug
  • Collaboration: អ្នកអភិវឌ្ឍន៍ច្រើននាក់ធ្វើការងាយ
  • Organization: អាចបែងចែកជា modules តូចៗ

គុណវិបត្តិ ⚠️

  • ត្រូវការ HTTP request បន្ថែម (ប៉ុន្តែ browser cache ជួយ)
  • ទាមទារការរៀបចំ file structure

Best Practice: សម្រាប់គម្រោងវិជ្ជាជីវៈ គួរប្រើ External JavaScript ជានិច្ច! វាជួយក្នុងការ maintain, test និង scale គម្រោងរបស់អ្នក។

ចំណាំសំខាន់ៗ

១. លំដាប់នៃការ Load

JavaScript រត់តាមលំដាប់ពីលើចុះក្រោម។ ប្រសិនបើមាន <script> ច្រើន កូដនៅ script ដំបូងរត់មុន។

២. បញ្ហា Blocking

JavaScript អាច block ការ render HTML។ ដូច្នេះគួរដាក់ <script> នៅចុងបំផុតនៃ <body> ឬប្រើ defer / async attributes។

<!-- Load asynchronously (មិន block HTML) -->
<script src="script.js" async></script>

<!-- Load បន្ទាប់ពី HTML parse រួច -->
<script src="script.js" defer></script>

៣. ច្រើន <script> Tags

អ្នកអាចមាន <script> tags ច្រើនបាន ប៉ុន្តែត្រូវប្រុងប្រយ័ត្នអំពីលំដាប់ និង dependencies។

<!-- ឧទាហរណ៍: jQuery ត្រូវ load មុន plugins -->
<script src="jquery.js"></script>
<script src="jquery-plugin.js"></script>
<script src="my-script.js"></script>

៤. ការប្រើប្រាស់ច្រើន

អ្នកអាចរួមបញ្ចូលវិធីទាំង ៣ ក្នុងគម្រោងតែមួយ ប៉ុន្តែគួរមានគោលការណ៍ច្បាស់លាស់។

តារាងប្រៀបធៀប

លក្ខណៈ Inline Internal External
Maintainability ❌ ពិបាក ⚠️ មធ្យម ✅ ងាយ
Reusability ❌ មិនបាន ❌ មិនបាន ✅ បាន
Caching ❌ មិនបាន ❌ មិនបាន ✅ បាន
Separation ❌ លាយ ⚠️ ល្អជាង ✅ ដាច់
Loading Time ✅ លឿន ✅ លឿន ⚠️ យឺតបន្តិច
Best for Testing Small projects Large projects

ការណែនាំ (Best Practices)

  1. ប្រើ External JavaScript សម្រាប់គម្រោងធំ
  2. ដាក់ <script> នៅចុងបំផុត នៃ <body> ដើម្បីមិន block rendering
  3. ប្រើ defer attribute សម្រាប់ scripts ធំៗ
  4. រួមបញ្ចូល និង minify files ច្រើនទៅជាមួយ សម្រាប់ production
  5. ចៀសវាង Inline JavaScript លើកលែងតែចាំបាច់ណាស់
  6. ប្រើ modules (ES6 modules) សម្រាប់ code organization ល្អ

សរុប: External JavaScript គឺជាជម្រើសល្អបំផុតសម្រាប់គម្រោងវិជ្ជាជីវៈទាំងអស់។ វារក្សាកូដរបស់អ្នកឲ្យមានការរៀបចំ clean និង maintainable!

មេរៀនមុន
អំពី JavaScript
មេរៀនបន្ទាប់
មូលដ្ឋាន