ទិដ្ឋភាពទូទៅនៃ 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
var (Global Scope):
ជាទូទៅមាន Global Scope ឬ Function Scope (មានន័យថាវាអាចចូលប្រើបានពីគ្រប់ទីកន្លែងក្នុងកម្មវិធី ឬនៅក្នុង function ទាំងមូលដែលវាត្រូវបាន
ប្រកាស)។
let (Local Scope):
មាន Local Scope ឬ Block Scope (មានន័យថាវាត្រូវបានកំណត់ត្រឹមតែ block of code ដូចជា if statement ឬ for loop ដែលវាត្រូវបានប្រកាស)។
const (Local Scope, Cannot re-assigned):
ប្រើសម្រាប់ប្រកាស Constants (តម្លៃថេរ)។
ក៏មាន Local Scope ឬ Block Scope ដែរ។
មិនអាចកំណត់តម្លៃឡើងវិញបាន (Cannot re-assigned) នៅពេលដែលបានកំណត់តម្លៃដំបូង (Initial value) ហើយ។
ច្បាប់មូលដ្ឋាននៃការដាក់ឈ្មោះ Variables (អថេរ)
ខាងក្រោមនេះជាច្បាប់សំខាន់ៗដែលអ្នកត្រូវអនុវត្តតាម ពេលដាក់ឈ្មោះ (Naming) អថេរនៅក្នុង JavaScript៖
ឈ្មោះត្រូវតែចាប់ផ្ដើមដោយ អក្សរ (a ដល់ z ឬ A ដល់ Z) ឫ សញ្ញាគូសក្រោម (_) ឫ សញ្ញាដុល្លារ ($)។
បន្ទាប់ពីតួអក្សរដំបូង (first letter) យើងអាចប្រើ លេខ (0 ដល់ 9) បាន។
ឈ្មោះអថេរ មិនអាច មាន ចន្លោះទំនេរ (whitespace) បានទេ។
ឈ្មោះអថេរ មិនអាច ជា ពាក្យគន្លឹះ (JavaScript keyword) បានទេ (ដូចជា៖ true, false, new, this, etc.)។
ឈ្មោះអថេរគឺ Case-sensitive (មានន័យថា var A និង var a គឺជាអថេរពីរផ្សេងគ្នា)។
ប្រភេទទិន្នន័យ (Data Types) និងការដាក់តម្លៃ (Assignment)
នៅក្នុង JavaScript មានប្រភេទទិន្នន័យ (Data Types) ជាច្រើន ប៉ុន្តែសម្រាប់ពេលនេះ សូមពិចារណាលើ លេខ (Numbers) និង អក្សរ (Strings) ជាមុនសិន។
1. របៀបដាក់តម្លៃទៅក្នុង Variables
String (អក្សរ): នៅពេលអ្នកដាក់តម្លៃជាអក្សរ (string) ទៅក្នុងអថេរ (variable) អ្នកត្រូវដាក់។
សញ្ញាដកស្រង់ទ្វេដង (double quotes) ឬ សញ្ញាដកស្រង់តែមួយ (single quotes) ព័ទ្ធជុំវិញតម្លៃនោះ។
let name = "Sok"; const greeting = 'Hello!';
2. ការប្រកាសអថេរច្រើនក្នុង Statement តែមួយ
អ្នកអាចប្រកាសអថេរជាច្រើនក្នុង Statement តែមួយបាន។ គ្រាន់តែចាប់ផ្តើម Statement ជាមួយ var (ឬ let)
ហើយបំបែកអថេរនីមួយៗដោយសញ្ញាក្បៀស (comma)។
var name = "Sombath", age = 18 , gender = "male";
Data Type
Data Type
JavaScript គឺជា dynamic type language។ នេះមានន័យថា អ្នកមិនចាំបាច់បញ្ជាក់ប្រភេទរបស់អថេរទេ ព្រោះវាត្រូវបានប្រើប្រាស់ដោយម៉ាស៊ីន
JavaScript ដោយស្វ័យប្រវត្តិនៅពេលដំណើរការ។
នៅក្នុង JavaScript មានប្រភេទទិន្នន័យសំខាន់ៗពីរប្រភេទ៖
1. Primitive Data Types (ប្រភេទបឋម) basic type
ទាំងនេះគឺជាតម្លៃសាមញ្ញ និងតំណាងឱ្យទិន្នន័យតែមួយ (single value)។ ឧទាហរណ៍ដូចជា៖
String (អក្សរ): ប្រើសម្រាប់ផ្ទុកអត្ថបទ។ ត្រូវដាក់សញ្ញាដកស្រង់ (quotes) ព័ទ្ធជុំវិញតម្លៃ។
var name = ' genz coder ';
var year = 18;
2. Non-primitive (Reference) Data Types (ប្រភេទមិនមែនបឋម)
ទាំងនេះត្រូវបានគេហៅថា "Reference Types" ហើយត្រូវបានប្រើដើម្បីផ្ទុកតម្លៃស្មុគស្មាញ (complex values) ឬការប្រមូលផ្ដុំទិន្នន័យ (collection of data)។
ឧទាហរណ៍៖
Object: ប្រើដើម្បីផ្ទុកទិន្នន័យគូរសោ-តម្លៃ (key-value pairs)។
var person = {name: 'sombath', age: 25};
3. Number (លេខ)
JavaScript មានប្រភេទទិន្នន័យតែមួយសម្រាប់គ្រប់ប្រភេទលេខទាំងអស់។
វាអាចជាលេខគត់ (integers) ឬលេខទសភាគ (floating-point numbers)។
var dollar = 100; // លេខគត់ (Integer)
var euro = 12.15; // លេខទសភាគ (Decimal)
4. Boolean (ប៊ូលីន)
Boolean តំណាងឱ្យតម្លៃឡូជីខល (logical value) គឺមានតែ true (ពិត) ឬ false (មិនពិត) តែប៉ុណ្ណោះ។
var check = true; // តម្លៃពិត (True)
var uncheck = false; // តម្លៃមិនពិត (False)
5. Object
Object គឺជាប្រភេទទិន្នន័យមិនមែនបឋម (Non-primitive/Reference Data Type) ដែលត្រូវបានប្រើដើម្បីផ្ទុកការប្រមូលផ្ដុំទិន្នន័យ (collection of data) ជាគូរសោ-តម្លៃ (key-value pairs)។
6. Undefined (មិនកំណត់)
Undefined តំណាងឱ្យអថេរ (variable) ដែលត្រូវបានប្រកាស (declared) ប៉ុន្តែ មិនទាន់ ត្រូវបានដាក់តម្លៃ (assigned a value) នៅឡើយ។
var x; console.log(x); // លទ្ធផល៖ undefined
7 . Null (គ្មាន)
Null តំណាងឱ្យប្រភេទទិន្នន័យដែលមានតម្លៃតែមួយគត់គឺ null។
វាត្រូវបានប្រើដើម្បីកំណត់ថាអថេរមួយ មិនមានតម្លៃ នោះទេ (ជាធម្មតាវាត្រូវបានកំណត់ដោយអ្នកសរសេរកម្មវិធីដោយខ្លួនឯង)។
var y = null; console.log(y); // លទ្ធផល៖ null