អ្វីជា JavaScript និង TypeScript

មាតិកា

1. ភាសាបី ការងារបី
2. Engine និង Runtime
3. រៀបចំកន្លែងធ្វើការរបស់អ្នក
4. Console និង DevTools
5. Script ដំបូងរបស់អ្នកក្នុង Browser
6. Script ដំបូងរបស់អ្នកក្នុង Node
7. កន្លែងដែល TypeScript ស្ថិតនៅ
8. គម្រោងដែលអ្នកនឹងសាងសង់
9. សាកល្បងដោយខ្លួនឯង

1. ភាសាបី ការងារបី

នៅក្នុង អ្វីជា HTML និង CSS អ្នកបានរៀនថា HTML ពណ៌នា អ្វី ដែលនៅលើទំព័រ ហើយ CSS ពណ៌នា របៀបដែលវាមើលទៅ។ ទាំងពីរជា declarative៖ អ្នកបញ្ជាក់លទ្ធផលដែលអ្នកចង់បាន ហើយ browser រកជំហានដោយខ្លួនឯង។ គ្មានភាសាណាមួយអាចធ្វើការសម្រេចចិត្ត ធ្វើកិច្ចការម្តងហើយម្តងទៀត ឬឆ្លើយតបនឹងការចុចបានទេ។

JavaScript គឺជាភាសាទីបី ហើយវាបំពេញចន្លោះនោះ។ វាជា ភាសាសរសេរកម្មវិធី ពិតប្រាកដ៖ វាមាន variable លក្ខខណ្ឌ loop និង function។ វាពណ៌នា អ្វីដែលទំព័រធ្វើ។

ក្នុងការប្រៀបធៀបផ្ទះពីស៊េរីមុន JavaScript គឺជាអគ្គិសនី និងប្រព័ន្ធទឹក។ ជញ្ជាំង និងថ្នាំលាបដំណើរការបានដោយគ្មានវា ប៉ុន្តែកុងតាក់ ភ្លើង និងម៉ាស៊ីនទឹកត្រូវការវា។

ទោះបីឈ្មោះស្រដៀងគ្នា JavaScript គ្មានទំនាក់ទំនងអ្វីជាមួយ Java ទេ។ ពួកវាជាភាសាផ្សេងគ្នា ដែលចៃដន្យមានឈ្មោះរួមគ្នាមួយផ្នែក។

2. Engine និង Runtime

កុំព្យូទ័រមិនអាចដំណើរការ JavaScript ដោយផ្ទាល់បានទេ។ កម្មវិធីមួយហៅថា JavaScript engine អានកូដរបស់អ្នក ហើយដំណើរការវា។ Chrome និង Edge ប្រើ engine ឈ្មោះ V8, Firefox ប្រើ SpiderMonkey ហើយ Safari ប្រើ JavaScriptCore។ ពួកវាទាំងអស់ធ្វើតាមស្តង់ដារភាសាដូចគ្នា ដូច្នេះកូដដូចគ្នាដំណើរការនៅគ្រប់ទីកន្លែង។

Engine យល់តែភាសាខ្លួនឯងប៉ុណ្ណោះ។ ដើម្បីធ្វើអ្វីដែលមានប្រយោជន៍ វាត្រូវការ runtime៖ engine បូករួមនឹងឧបករណ៍បន្ថែមពីបរិស្ថានដែលដំណើរការវា។ មាន runtime ពីរដែលសំខាន់សម្រាប់ស៊េរីនេះ៖

ភាសាគឺដូចគ្នានៅទាំងពីរ។ អ្វីដែលប្រែប្រួលគឺសំណុំ object ដែលមាន។ នៅក្នុង browser document អនុញ្ញាតឲ្យអ្នកផ្លាស់ប្តូរទំព័រ។ នៅក្នុង Node document មិនមានទេ ប៉ុន្តែអ្នកអាចអាន និងសរសេរ file។ ក្នុងជំពូកទី 2 ដល់ទី 7 យើងប្រើទាំងពីរ ព្រោះ Node ជាវិធីលឿនបំផុតដើម្បីសាកល្បងលក្ខណៈភាសាសាមញ្ញ។ ចាប់ពីជំពូកទី 8 យើងធ្វើការក្នុង browser។

3. រៀបចំកន្លែងធ្វើការរបស់អ្នក

អ្នកមាន VS Code និង folder dara-profile រួចហើយពីស៊េរីមុន។ ឥឡូវអ្នកត្រូវការ Node.js។ ដំឡើងវាដោយប្រើ nvm (Node Version Manager) ដែលអនុញ្ញាតឲ្យអ្នកប្តូរកំណែ Node ដោយមិនធ្វើឲ្យកុំព្យូទ័រខូច។ ធ្វើតាមជំហានដំឡើងនៅ ទំព័រ nvm សម្រាប់ macOS និង Linux ឬប្រើ nvm-windows នៅលើ Windows។ បន្ទាប់មកដំឡើងកំណែ LTS (Long Term Support) បច្ចុប្បន្ន ដែលជាកំណែស្ថិរភាពសម្រាប់មនុស្សភាគច្រើន៖

nvm install --lts
nvm use --lts
node --version

អ្នកគួរតែឃើញកំណែដូចជា v22.x.x ឬខ្ពស់ជាងនេះ។ ប្រសិនបើអ្នកឃើញ command not found សូមបិទ terminal បើកថ្មី ហើយសាកល្បងម្តងទៀត។

បន្ទាប់ សូមបើកគម្រោងរបស់អ្នក ហើយបង្កើត folder សម្រាប់កូដថ្មី៖

cd dara-profile
mkdir js
code .

index.html និង styles.css ដែលមានស្រាប់នៅដដែល។ ក្នុង VS Code, extension Live Server ដែលអ្នកបានដំឡើងពីមុនដំណើរការដូចដើម។

4. Console និង DevTools

បើក index.html ក្នុង browser របស់អ្នក ចុច F12 ហើយចុចផ្ទាំង Console។ នេះជាកន្លែងសម្រាប់វាយ JavaScript ហើយឃើញលទ្ធផលភ្លាមៗ។ សាកល្បង៖

2 + 3

ចុច Enter។ Console បោះពុម្ព 5។ ឥឡូវសាកល្បង៖

console.log("Hello from the console");

console.log() បោះពុម្ពសារមួយ។ វាជាឧបករណ៍ debug ដែលប្រើច្រើនបំផុតក្នុង JavaScript៖ នៅពេលអ្នកមិនប្រាកដថាតម្លៃមួយជាអ្វី សូមបោះពុម្ពវា។ ផ្ទាំង Console ក៏បង្ហាញ កំហុស ជាពណ៌ក្រហម ជាមួយឈ្មោះ file និងលេខបន្ទាត់ផងដែរ។ ត្រូវមើលនៅទីនោះជាមុនសិនជានិច្ច នៅពេលមានអ្វីមិនដំណើរការ។

បន្ទះ Elements ពីស៊េរី HTML នៅតែមាន ហើយឥឡូវវាសំខាន់ជាងមុន ព្រោះ JavaScript ផ្លាស់ប្តូរ DOM ដែលអ្នកបានឃើញ។ អ្នកនឹងមើល element លេចឡើង និងផ្លាស់ប្តូរនៅពេលកូដរបស់អ្នកដំណើរការ។

5. Script ដំបូងរបស់អ្នកក្នុង Browser

បង្កើត file ឈ្មោះ js/main.js៖

console.log("Hello, Dara!");

តភ្ជាប់វាទៅទំព័រដោយបន្ថែម tag <script> នៅចុងបញ្ចប់នៃ <body> ក្នុង index.html ត្រង់មុន </body>៖

<script src="js/main.js"></script>

Save, reload ទំព័រ ហើយបើក Console។ អ្នកគួរតែឃើញ Hello, Dara! ជាមួយ main.js:1 នៅក្បែរ ដែលប្រាប់អ្នកថាសារមកពីឯណា។

ហេតុអ្វីនៅចុងបញ្ចប់នៃ <body>? Browser អាន HTML ពីលើចុះក្រោម។ ប្រសិនបើ script ដំណើរការមុន element នៃទំព័រមិនទាន់មានទេ។ ការដាក់ script នៅចុងក្រោយមានន័យថាអ្វីៗនៅខាងលើវាត្រូវបានផ្ទុករួចហើយ។ (ជំពូកទី 8 បង្ហាញជម្រើសស្អាតជាងនេះ គឺ attribute defer។)

អ្នកក៏អាចសរសេរកូដដោយផ្ទាល់ក្នុងទំព័រដោយប្រើ <script>...</script> ប៉ុន្តែ file ដាច់ដោយឡែកធ្វើឲ្យ HTML របស់អ្នកស្អាត ដូចដែល styles.css ដាច់ដោយឡែកបានធ្វើ។

6. Script ដំបូងរបស់អ្នកក្នុង Node

File ដូចគ្នាអាចដំណើរការដោយគ្មាន browser។ ក្នុង terminal ពី folder dara-profile៖

node js/main.js

Terminal បោះពុម្ព៖

Hello, Dara!

កូដដូចគ្នា កន្លែងផ្សេងគ្នា។ ទីនេះ console.log សរសេរទៅ terminal ជំនួសឲ្យផ្ទាំង Console។ តោះធ្វើឲ្យភាពខុសគ្នាអាចមើលឃើញ។ បង្កើត js/where.js៖

if (typeof window === "undefined") {
  console.log("Running in Node");
} else {
  console.log("Running in a browser");
}

ដំណើរការវាដោយ node js/where.js បន្ទាប់មកបន្ថែមវាទៅទំព័រដោយ tag <script> មួយទៀត ហើយមើល Console របស់ browser។ អ្នកទទួលបានចម្លើយខុសគ្នា ព្រោះ window មានតែក្នុង browser ប៉ុណ្ណោះ។ កុំបារម្ភអំពី typeof និង if ឲ្យសោះ ជំពូកទី 2 និងទី 3 នឹងពន្យល់។

ដោយសារ Node មិនត្រូវការទំព័រ web អ្នកនឹងប្រើវាពេញមួយជំពូកដំបូងៗ ដើម្បីសាកល្បងគំនិតបានលឿន។

7. កន្លែងដែល TypeScript ស្ថិតនៅ

TypeScript គឺជា JavaScript ដែលមានស្រទាប់បន្ថែមមួយ៖ type។ Type បញ្ជាក់ថាអ្វីមួយគួរជាតម្លៃប្រភេទអ្វី ដូចជាលេខ ឬអត្ថបទ។ នេះជាគំរូតូចមួយ។ កុំទាន់សាកល្បងដំណើរការវា៖

function double(n: number): number {
  return n * 2;
}

double("hello"); // TypeScript រាយការណ៍កំហុស មុនពេលអ្នកដំណើរការអ្វីទាំងអស់

ផ្នែក : number គឺជា type។ JavaScript ធម្មតានឹងទទួល double("hello") ហើយផ្តល់លទ្ធផលដ៏ច្របូកច្របល់ពេល run។ TypeScript ចាប់កំហុសនៅពេលអ្នកកំពុងវាយ ក្នុង editor។

ការពិតបីដែលត្រូវចងចាំ៖

• TypeScript គឺជា superset នៃ JavaScript។ គ្រប់កម្មវិធី JavaScript ដែលត្រឹមត្រូវ ក៏ជា TypeScript ដែលត្រឹមត្រូវដែរ ដូច្នេះអ្វីដែលអ្នករៀនទីនេះអាចយកទៅប្រើបាន។
• Browser និង Node ដំណើរការ JavaScript មិនមែន TypeScript ទេ។ ឧបករណ៍មួយហៅថា TypeScript compiler ដកយក type ចេញ ហើយបង្កើត JavaScript ធម្មតា។
• Type មានតែពេលអ្នកសរសេរកូដប៉ុណ្ណោះ។ ពួកវាបាត់ទៅពេល run។

ដោយហេតុនេះ យើងរៀន JavaScript មុន ក្នុងជំពូកទី 2 ដល់ទី 10។ Type មានន័យច្បាស់ជាងនៅពេលអ្នកដឹងថាពួកវាពណ៌នាអ្វី។ បន្ទាប់មកជំពូកទី 11 និងទី 12 បន្ថែម TypeScript ទៅគម្រោងដូចគ្នា។

8. គម្រោងដែលអ្នកនឹងសាងសង់

ក្នុងដប់មួយជំពូកបន្ទាប់ អ្នកយកទំព័រប្រវត្តិរូបរបស់ Dara ពីស៊េរី HTML និង CSS ហើយធ្វើឲ្យវាមានអន្តរកម្ម៖

បន្ត commit បន្ទាប់ពីជំពូកនីមួយៗ ដូចមុន៖

git add .
git commit -m "Add first script"

9. សាកល្បងដោយខ្លួនឯង

1. ប្រើ Console ជាម៉ាស៊ីនគិតលេខ។ ក្នុង Console របស់ browser វាយ 10 * 7, "Dara" + " Sok" និង 100 / 3។ កត់ត្រាអ្វីដែលនីមួយៗត្រឡប់មក។
2. បោះពុម្ពសាររបស់អ្នកផ្ទាល់។ ផ្លាស់ប្តូរ js/main.js ដើម្បីបោះពុម្ពឈ្មោះរបស់អ្នក និងពណ៌ដែលអ្នកចូលចិត្តលើពីរបន្ទាត់ដាច់ដោយឡែក ដោយប្រើ console.log ពីរដង។ ពិនិត្យលទ្ធផលទាំងក្នុង browser និងក្នុង Node។
3. បង្កើតកំហុសដោយចេតនា។ ដកវង់ក្រចកបិទចេញពីការហៅ console.log( ហើយ save។ អានសារពណ៌ក្រហមក្នុង Console។ តើវាចង្អុលទៅ file និងបន្ទាត់ណា? កែវាឲ្យត្រឹមត្រូវវិញ។
4. ផ្លាស់ទី script។ ដាក់ tag <script> នៅក្នុង <head> ជំនួសឲ្យចុងបញ្ចប់នៃ <body>។ តើវានៅតែបោះពុម្ពទេ? បន្ថែមបន្ទាត់ console.log(document.body); ទៅ script ហើយមើលអ្វីដែលកើតឡើង។ បន្ទាប់មកផ្លាស់ទី tag ត្រឡប់ទៅវិញ។
5. ប្រៀបធៀប runtime ទាំងពីរ។ ក្នុង js/main.js បន្ថែម console.log(typeof document);។ តើវាបោះពុម្ពអ្វីក្នុង browser ហើយអ្វីក្នុង Node? ហេតុអ្វី?
6. ពិនិត្យឧបករណ៍របស់អ្នក។ ដំណើរការ node --version និង npm --version។ សរសេរលេខទាំងពីរក្នុង file ឈ្មោះ notes.txt។

បន្ទាប់ យើងនឹងចាប់ផ្តើមរៀនភាសាខ្លួនឯង៖ របៀបរក្សាទុកតម្លៃក្នុង variable និងប្រភេទតម្លៃដែល JavaScript មាន។ បន្តជាមួយ តម្លៃ Variable និង Type។