ទិដ្ឋភាពទូទៅនៃ JavaScript
JavaScript ជាអ្វី ?
JavaScript គឺជាកូដកម្មវិធី (programming code) ដែលអាចបញ្ចូលទៅក្នុងទំព័រ HTML
JavaScript ដែលបានបញ្ចូលទៅក្នុងទំព័រ HTML អាចត្រូវបានដំណើរការ
(execute) ដោយកម្មវិធីរុករកគេហទំព័រ (web browsers) ទំនើបៗទាំងអស់។
JavaScript គឺងាយស្រួលអនុវត្ត
ប្រវត្តិភាសា javaScript ( js )
JavaScript ត្រូវបានបង្កើតឡើងដោយលោក Brendan Eich
លេចចេញដំបូងក្នុងឆ្នាំ ១៩៩៥ នៅក្នុងកម្មវិធីរុករកឈ្មោះ Netscape (ដែលលែងមានប្រើហើយ)។
ចាប់តាំងពីឆ្នាំ ១៩៩៧ មក វាត្រូវបានអនុម័តនិងកំណត់ជាស្ដង់ដារដោយសមាគម ECMA។ ស្ដង់ដារនេះត្រូវបានគេហៅថា ECMAScript (ES)។
បច្ចុប្បន្ន កំណែថ្មីបំផុតគឺ ES14 (ដែលត្រូវនឹង ECMAScript 2023 ឬ ES2023)។
អ្វីដែលយើងអាចធ្វើបានជាមួយ JavaScript?
ការសរសេរចូលទៅក្នុងលទ្ធផល HTML (ដូចជាការប្រើប្រាស់ document.write())
ការផ្លាស់ប្ដូររចនាបថ HTML (ឧទាហរណ៍ ផ្លាស់ប្ដូរពណ៌ផ្ទៃខាងក្រោយ ទំហំអក្សរ ដោយប្រើ CSS)
ការផ្លាស់ប្ដូរខ្លឹមសារ HTML (ឧទាហរណ៍ ផ្លាស់ប្ដូរអត្ថបទនៅក្នុង paragraph ឬ heading ដោយប្រើ innerHTML)
ការផ្លាស់ប្ដូររូបភាព HTML (ឧទាហរណ៍ ផ្លាស់ប្ដូររូបភាពនៅពេលចុចប៊ូតុង ឬនៅពេលដាក់ Mouse ពីលើ)
ការបន្ថែមព្រឹត្តិការណ៍ទៅកាន់ធាតុ HTML (ឧទាហរណ៍ ធ្វើឱ្យមានប្រតិកម្មនៅពេលចុច Mouse (onClick) នៅពេលបញ្ចូលទិន្នន័យ (onInput) ឬនៅពេលផ្ទុកទំព័រ (onLoad))
យើងអាចភ្ជាប់ Javascript បាន ២ របៀប
1 / Internal JS
គឺអ្នកសរសេរកូដ JavaScript ដោយផ្ទាល់នៅក្នុងឯកសារ HTML របស់អ្នកដោយការប្រើប្រាស់ស្លាក (tag) <script>។
<script> អាចត្រូវបានដាក់នៅខាងក្នុងស្លាក <head> ឬ <body> របស់ឯកសារ HTML របស់អ្នក អាស្រ័យលើតម្រូវការ។
2 / External JS
វិធីនេះតម្រូវឱ្យអ្នកសរសេរកូដ JavaScript នៅក្នុងឯកសារដាច់ដោយឡែកមួយដែលមានឈ្មោះផ្នែកបន្ថែម (extension) ជា .js
បន្ទាប់មក ឯកសារ .js នោះត្រូវបានភ្ជាប់ (link) ទៅក្នុងឯកសារ HTML ដោយប្រើស្លាក <script> ដែលមាន Attribute src (ប្រភព)។
តាមធម្មតា វាត្រូវបានភ្ជាប់នៅខាងក្នុងស្លាក <head> ឬ និយមបំផុតគឺនៅ មុនស្លាកបិទ </body> ដើម្បីបង្កើនល្បឿននៃការផ្ទុកទំព័រ (Performance)。
Selector
អ្វីជាSelector ?
គឺជាវិធីសាស្ត្រដែលត្រូវបានប្រើដើម្បី ស្វែងរក និង ចាប់យកធាតុ (Elements) HTML ណាមួយនៅក្នុងទំព័រគេហទំព័រ (Web Page) ដោយប្រើប្រាស់ JavaScript។
Selector ប្រើប្រាស់ទូទៅមាន ៥ យ៉ាងសំខាន់ៗ
១. Selectors ទំនើប (ប្រើ CSS Syntax) - ពេញនិយមបំផុត
វិធីសាស្ត្រទាំងនេះអនុញ្ញាតឱ្យអ្នកប្រើ CSS Selector Syntax ដើម្បីស្វែងរកធាតុ។
1/ document.querySelector(selector)
រើសរើសយក ធាតុដំបូង (First Element) ដែលត្រូវនឹង CSS Selector ដែលបានបញ្ជាក់។
2/ document.querySelectorAll(selector)
ជ្រើសរើសយក ធាតុទាំងអស់ (All Elements) ដែលត្រូវនឹង CSS Selector ដែលបានបញ្ជាក់។
២. Selectors បុរាណ (ជ្រើសរើសតាមលក្ខណៈសម្បត្តិជាក់លាក់)
វិធីសាស្ត្រទាំងនេះមានល្បឿនលឿនសម្រាប់ស្វែងរកតាមលក្ខណៈសម្បត្តិសាមញ្ញប៉ុន្តែមិនសូវបត់បែនដូចវិធីសាស្ត្រខាងលើទេ។
3/ document.getElementById(id)
ជ្រើសរើសយកធាតុតែមួយគត់ដោយផ្អែកលើ ID របស់វា។ (ID ត្រូវតែប្លែក)
4/ document.getElementsByClassName(className)
ជ្រើសរើសយកធាតុទាំងអស់ដែលមាន ឈ្មោះ Class ដូចគ្នា។
5/document.getElementsByTagName(tagName)
រើសរើសយកធាតុទាំងអស់ដែលមាន ឈ្មោះ Tag ដូចគ្នា (ឧទាហរណ៍៖ 'div', 'p')។
javaScript Output
Alert Function
នៅក្នុង Javascript, មុខងារ alert គឺជាវិធីសាស្ត្រងាយស្រួលមួយដើម្បីបង្ហាញសារទៅកាន់អ្នកប្រើប្រាស់នៅក្នុងប្រអប់សារ (dialog box)។
<script> alert("Hello”); </script>
នៅពេលកូដនេះត្រូវបានប្រតិបត្តិ ប្រអប់សារមួយនឹងលេចឡើងដោយមានសារថា "Hello" និងប៊ូតុង "OK" មួយ។
Console log function
Console គឺជាផ្ទាំងពិសេសមួយដែលលាក់នៅក្នុង Browser (ដូចជា Chrome, Firefox) របស់អ្នក។ អ្នកអាចបើកវាបានដោយចុច F12 (ឬ Right Click → Inspect/ពិនិត្យមើល → Console)។
មុខងារ: វាមិនមែនសម្រាប់បង្ហាញសារទៅអ្នកប្រើប្រាស់ (ដូចជា alert()) នោះទេ! វាត្រូវបានប្រើសម្រាប់អ្នកសរសេរកូដ (Developers) ផ្ទាល់ដើម្បី៖
ពិនិត្យមើលកូដ (Debugging): តាមដានថា តើកូដរបស់អ្នកកំពុងដំណើរការទៅដល់ចំណុចណាហើយ?
ត្រួតពិនិត្យតម្លៃ (Checking Values): ពិនិត្យមើលថា តើអថេរ (Variable) មួយកំពុងផ្ទុកនូវតម្លៃត្រឹមត្រូវដែលអ្នកចង់បានឬទេ?
បញ្ជាក់ការដំណើរការ: មើលថាតើមុខងារ (Function) មួយត្រូវបានហៅ (Called) ពិតប្រាកដមែនឬអត់។
Javascript Comments
Comments
Comments (មតិយោបល់) គឺជាអត្ថបទដែលយើងសរសេរនៅក្នុងកូដដើម្បីពន្យល់ពីមុខងារនៃកូដនោះ ប៉ុន្តែវានឹងមិនត្រូវបានដំណើរការ (execute) ដោយ Computer ឡើយ។
ហេតុអ្វីបានជាយើងត្រូវការ Comments?
ទុកសម្រាប់មើលខ្លួនឯង៖ នៅពេលអ្នកត្រលប់មកមើលកូដចាស់ៗដែលធ្លាប់សរសេរ អ្នកនឹងយល់ភ្លាមថាវាជាអ្វី។
ទុកឱ្យអ្នកផ្សេងអាន៖ ពេលធ្វើការជាក្រុម សមាជិកផ្សេងទៀតអាចយល់ពីកូដរបស់អ្នកបានលឿន។
បិទកូដបណ្ដោះអាសន្ន៖ ប្រសិនបើអ្នកមិនចង់លុបកូដចោល តែចង់ផ្អាកមិនឱ្យវាដំណើរការ អ្នកគ្រាន់តែដាក់វាជា Comment ជាការស្រេច។
របៀបសរសេរ Comments
Single line comments start with //
Comments តែមួយជួរ ( line ) // ។
Multi line comments start with /* and end with */
Comments ច្រើនជួរចាប់ផ្តើមដោយ /* និងបញ្ចប់ដោយ */។
Javascript Variable
variable