Lesson 2

ម៉ា ស្ទ័រអាយធី
វគ្គ៖ JAVASCRIPT FROM BEGGINER TO ADVANCED
លោកគ្រូ៖ ផេងពុទ្ធា រិទ្ធ
MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

អំពី JAVASCRIPT
វគ្គសិក្សា JavaScript from beginner to advanced របស់សាលាម៉ា ស្ទ័រអាយធីជាវគ្គសិក្សាស្តីអំពី

មូលដ្ឋា នគ្រឹះនៅក្នុង Web Development។ នៅក្នុង Web Development ត្រូវបានគេបែងចែកជាពីរ
គឺ Front-end និង Back-end ដែល Frameworks យកមកប្រើសំរាប់ Front-end និង Back-end
មានដូចជា Angular.JS Vue.JS React.JSNode.JS( ដើម្បីបង្កើតបានជា Websiteស្តង់ដារ ) ដែល
ទំាងអស់នេះសុទ្ធតែជា Frameworks របស់ JavaScript ទំាងអស់។ លើសពីនេះយើងអាចប្រើ
JavaScript Frameworks ផេ្សងទៀតដើម្បីបង្កើត Desktop Application ( Electron.JS ) និង
Mobile application ( React Native)។

លទ្ធផលនៃការសិក្សាវគ្គសិក្សា JAVASCRIPT
១. ចេះមូលដ្ឋា នគ្រឹះដល់ advanced features របស់ JavaScript
២. ចេះទំាងទ្រឹស្តីនិងការអនុវត្តន៍លំហាត់
៣. អនុវត្តន៍ Bank transaction ( ដកនិងដាក់លុយ នៅលើផ្ទាំង Console )
៤. ចេះប្រើប្រាស់ Online IDE ដោយពុំចាំបាច់ដំឡើងកម្មវិធីអ្វីទាំងអស់នៅលើកុំព្យូទ័រ
៥. មានមូលដ្ឋា នគ្រឹះអាចបន្តទៅផ្នែក Front-endឬ Back-endឬ ទាំងពីរក៏បាន
៦. មានសមត្ថភាពគ្រប់គ្រាន់ និងទំនុកចិត្តដើម្បីបន្តចាប់យក Frameworks របស់ JavaScript

ជំពូកទី១ មូលដ្ឋា នគ្រឹះ Beginner

មេរៀនទី២ មូលដ្ឋា នគ្រឹះនៅក្នុងភាសា JavaScript
១. Hello World!
១.១ ការប្រើប្រាស់ document.write
document.write ប្រើសម្រាប់បង្ហា ញ content នៅលើ browser។
ឧ.ទ៖ document.write("Hello World!");

១.២ ការប្រើប្រាស់ console.log
យើងប្រើប្រាស់ console.log ដើម្បីបង្ហា ញ content នៅលើផ្ទាំង console ។
ឧ.ទ៖ console.log("Hello World!");

១.៣ ការប្រើប្រាស់ alert
Alert ខុសពីគេគឺនៅពេលដែលយើងប្រើ alert វានឹង popupcontentបន្ទា ប់មកយើងត្រូវចុច
ប៊ូតុង okឬ Esc key ដើម្បីបិទវិញ។
ឧ.ទ៖ console.log("Hello World!");

១.៤ ការប្រើប្រាស់ prompt
Function prompt មានពីរ parameters។
let result = prompt(title, [default]);
* square brackets ([ ]) នៅសងខាង default តំណាងឱ្យមានក៏បានអត់ក៏បាន (optional)។
ឧទាហរណ៍ ៖
let result = prompt("Enter any number");
console.log("Result: ", result);

១.៥ Limitation នៅក្នុង script tag
ប្រសិនបើនៅក្នុង script tag មាន src attribute នោះ content ( alert(“Hello, World!”) )
ដែលនៅក្នុង tag នោះនឹងមិនត្រូវបានដំណើ រការទេ( ignored ) ។
<script src="script.js">
alert("Hello World!");
</script>

ដំណោះស្រាយ៖
<script src="script.js"></script>
<script>
alert("Hello World!");
</script>

២. អញ្ញ ត្តិ Variable
អញ្ញ ត្តិគឺជា “named storage” សំរាប់ទិន្នន័យ ហើយយើងប្រើប្រាស់អញ្ញ ត្តិដើម្បីផ្ទុក
ទិន្នន័យ។

២.១ អញ្ញ ត្តិ let
ប្រកាសអញ្ញ ត្តិហើយផ្តល់តម្លៃឱ្យនៅពេលក្រោយ (Declare variable and assign later) ៖
let number;
number = 10;
console.log(number);

ប្រកាសអញ្ញ ត្តិហើយផ្តល់តម្លៃភ្លា មៗ (Declare variable and assign into a single line) ៖
let number = 10;
console.log(number);
ប្រកាសអញ្ញ ត្តិច្រើននៅលើជួរតែមួយ (Declare multiple variables in one line) ៖

let message = "hello", age = 20, user = "Rotana";

២.២ អញ្ញ ត្តិ var
ការប្រើប្រាស់អញ្ញ ត្តិ var ដូចទៅនឹង letដែរ។ ប៉ុន្តែវាជាការប្រើប្រាស់កាលពីមិនទាន់
មាន let និង const។ លើសពីនេះវាមានចំនុចខ្សោយរបស់វា ដែលត្រូវបានគេលែងសូវ
ប្រើប្រាស់មកដល់ឥឡូ វ។ត្រង់បញ្ហា នេះយើងនឹងលើកយកមកនិយាយម្តងទៀតនៅមេរៀន
The old “var” ។
var animal = "dog";
console.log(animal);

២.៣ អញ្ញ ត្តិ const
ការប្រើប្រាស់អញ្ញ ត្តិ const ក៏មិនខុសពី let ទេ, ចំនុចមួយដែលខុសគ្នា គឺយើងអាចផ្លា ស់
ប្តូរតម្លៃ របស់ let តែយើងមិនអាចផ្លា ស់ប្តូរតម្លៃរបស់ const បានទេ ប្រសិនបើយើងផ្លា ស់ប្តូរ
វានឹងបង្កើត ជា Error។

២.៤ ការដាក់ឈ្មោះអញ្ញ ត្តិ (Variable)
ដែនកំណត់នៃការដាក់ឈ្មោះឱ្យអញ្ញ ត្តិ។
1. ឈ្មោះត្រូវតែជាលេខឬក៏អក្សរ ឬក៏និមិត្តសញ្ញា $ និង underscore ( _ )
2. អក្សរដំបូងរបស់ឈ្មោះមិនអាចជាលេខ
3. មិនត្រូវប្រើប្រាស់ Reserved name ( let, const, return, function ។ល។ )

៣. ប្រភេទទិន្នន័យ Data types
តម្លៃរបស់អញ្ញ ត្តិនៅក្នុង JavaScript គឺតែងតែមានប្រភេទរបស់វាដូចជា Boolean, String

ឬក៏ Number។ នៅក្នុងភាសា JavaScriptមានទិន្នន័យ៨ប្រភេទ។

៣.១ Number
ប្រភេទទិន្នន័យ Number តំណាងឱ្យទំាង integer និងfloating point ។
let num = 123;
num = 12.345;
alert( num );

៣.២ BigInt
នៅក្នុងភាសា JavaScript, ប្រភេទទិន្នន័យជា Number មិនអាចលើសពី (253-1)
ដែលស្មើ នឹង 9007199152420991 ឬក៍តិចជាង -(253-1) សម្រាប់ផ្នែក
អវិជ្ជមាន។
ប្រសិនជាយើងចង់ប្រើប្រាស់ចំនួនដែលលើសពីនេះយើងប្រើប្រាស់ BigInt។
const bigInt = 1234567890123456789012345678901234567890n;
អក្សរ “n” នៅខាងចុងលេខតំណាងឱ្យ BigInt។

៣.៣ String
String ត្រូវតែប្រើ single quotes ( ‘ ’ ) ឬ double quotes ( “ ” ) នៅក្តោ បសងខាង text។
លើសពីនេះយើងនៅអាចប្រើប្រាស់ template string ។ Syntax របស់ template
string ` ${} ` ។
const book = ‘Cambodia History’;

console.log(book);
let a = 10;
let b = 20;
console.log(`A = ${a}, B = ${b}`);

៣.៤ Boolean
ប្រភេទទិន្នន័យ Boolean មានតែពីរតម្លៃតែប៉ុណ្ណោះគឺ true និង false។
const isTrue = true;
const isFalse = false;
console.log(isTrue, isFalse);

៣.៥ The “null” value
នៅក្នុងភាសា JavaScript, null គឺជា special value ដែលតំណាងឱ្យ “nothing”,
“empty” ឬក៏ “unknown value”។ មានន័យថាវាគឺប្រភេទទិន្នន័យ null។
let sum = null;

៣.៦ The “undefined” value
Undefined គឺជា special value ដែលតំណាងឱ្យតម្លៃដែលមិនបាន assign
ទៅឱ្យអញ្ញ ត្តិ។

៣.៧ Objects
ប្រភេទទិន្នន័យដែលបានរៀបរាប់ដូចខាងលើគឺត្រូវបានហៅថា “primitive value” ដែលតម្លៃ
របស់ពួកវាអាចផ្ទុកនូវវត្ថុមួយ ( a single thing ) តែមួយប៉ុណ្ណោះ។ ចំនែកឯ Objects គឺត្រូវ
បានប្រើ សម្រាប់ផ្ទុកនូវ collections of data និង more complex entities។
const user = {
name: "Tola",
age: 18
};

៣.៨ Symbols
សម្រាប់ Symbols នេះយើងនឹងរៀននៅក្នុងមេរៀនទី៤។

៣.៩ The “typeof” Operator
The “typeof” operator returns តម្លៃជាប្រភេទទិន្នន័យរបស់អញ្ញ ត្តិដែលយើងបានបោះ
ឱ្យ។ សារៈសំខាន់របស់វាគឺដើម្បីពិនិត្យមើលប្រភេទទិន្នន័យនីមួយៗដែលយើងចង់ដឹង។
សម្រាប់ការប្រើប្រាស់មានពីររបៀបនិងលទ្ធផលគឺដូចគ្នា ៖
typeof x
typeof(x)

លំហាត់
ចូរធ្វើការបង្ហា ញប្រភេទទិន្នន័យទំាង៧ដែលយើងបានរៀនហើយនៅខាងលើដោយ
ប្រើប្រាស់
alert សម្រាប់ធ្វើការបង្ហា ញ។

៤. ការផ្លា ស់ប្តូរប្រភេទទិន្នន័យ Type Conversion
ជាទូទៅ operators និង functions ភាគច្រើនផ្លា ស់ប្តូរប្រភេទតម្លៃរបស់អញ្ញ ត្តិដែលយើង

បាន បោះឱ្យទៅកាន់ពួកវាហើយពួកវាធ្វើការផ្លា ស់ប្តូរប្រភេទតម្លៃ (ឬហៅថាប្រភេទទិន្នន័យ
ក៏បាន) នោះ ទៅជាប្រភេទទិន្នន័យត្រឹមត្រូវមួយ។ ជាឧទាហរណ៍ alert បានផ្លា ស់ប្តូរប្រភេទ
ទិន្នន័យទៅជា String ដោយស្វ័យប្រវត្តិ និង arithmetic operations ធ្វើការផ្លា ស់ប្តូរ
តម្លៃទៅជា Number។

៤.១ String Conversion
យើងបានប្រើប្រាស់ built-in String function ដើម្បីផ្លា ស់ប្តូរប្រភេទ តម្លៃ របស់អញ្ញ ត្តិ៖
let num = 123;
console.log(typeof num);
num = String(123);

៤.២ Numeric Conversion
Numeric conversion កើតឡើងដោយស្វ័យប្រវត្តិនៅពេលដែលយើងប្រើប្រាស់
arithmetic operations ដូចជា / * - %។
ចំណាំ៖ ប្រសិនបើយើងប្រើប្រាស់ arithmetic operation ( + ) វានឹងប្តូរទៅជា

ប្រភេទទិន្នន័យ String វិញ។

៤.៣ Boolean Conversion
មុននឹងនិយាយអំពី Boolean conversion យើងទៅស្គា ល់អំពី falsy value និង truthy
value សិន។
falsy value គឺរាល់តម្លៃទំាងឡាយណាដែល returns មិនពិត ( false )។
falsy value មានដូចជា 0, -0, undefined, null, empty string (""), និង NaN ក្រៅពីនេះគឺ
truthy value ទំាងអស់។
truthy value គឺជារាល់តម្លៃទំាងឡាយណាដែល returns ពិត ( true )។

៥. Basic operators, maths
Operand គឺជាតម្លៃទំាងឡាយណាដែលអាចយកមកគណនាបាន។
ឧទាហរណ៍ ៖ 8 + 2; 8 និង 2 គឺជា operand។
Unary operator គឺជា operator ដែលមានតែមួយ operand។ ភាគច្រើនយើងប្រើ

unary operator ដើម្បី performs decrement/increment operations។
ឧទាហរណ៍ ៖ let y = 10;
– –y;
(–) គឺជា operator, (y) គឺជា operand
(– –y) គឺជា unary operator ។

Binary operator គឺoperator ដែល operates ជាមួយនឹង២ operands ហើយreturns តម្លៃ។
ឧទាហរណ៍ ៖ let y = 10;
let x = 5;
let z = y – x;
(y– x) គឺជា binary operator ។
(let z = y – x;) គឺជា expression។

៥.១ Maths operations
Addition ( + )
Subtraction ( – )
Multiplication ( * )
Division ( / )
Remainder ( % )
Exponentiation ( ** )

៥.២ String Concatenation with binary +
ការតភ្ជា ប់ String ដោយប្រើប្រាស់ binary + ៖
let greetings = "Hello" + " World!";
alert(greetings);

៥.៣ Numeric conversion, unary +
ការប្រើប្រាស់ unary + ដើម្បីផ្លា ស់ប្តូរប្រភេទតម្លៃទៅជា Number ៖
let num = "123";
num = +num;

៥.៤ Operator precedence
ប្រសិនបើ expression មួយមាន operator ច្រើនការគណនាត្រូវគិតតាមលំដាប់អាទិភាព
របស់ ពួកវា។
let total = 100 – 10 * 5;
ឧទាហរណ៍ ខាងលើគឺ operator ( * ) មានអាទិភាពខ្ពស់ជាង operator ( – )។

៦. ការប្រៀបធៀប Comparisons
Comparisons គឺជាការប្រៀបធៀបរវាងតម្លៃពីរ ហើយលទ្ធផលរបស់វាគឺមានតែពីរទេគឺពិត (true)
និងមិនពិត (false)។
Comparisons មានដូចជា៖
Greater than ( a > b )
Less than ( a < b )
Greater than or equals ( a >= b )
Less than or equals ( a <= b )
Equals ( a == b )
Not equals ( a != b )

៦.១ ការប្រៀបធៀប String
• របៀបនៃការប្រៀបធៀប String
o ប្រៀបធៀបមួយតួអក្សរដំបូងរបស់ strings ទំាងពីរ
o ប្រសិនបើមួយតួអក្សរដំបូងរបស់ string ធំជាងមួយតួអក្សរដំបូងរបស់ string មួយទៀតគឺ

ធំជាងដោយពុំចាំបាច់ប្រៀបធៀបតួអក្សរបន្ទា ប់ ប៉ុន្តែបើស្មើគ្នា គឺត្រូវប្រៀបធៀបតួអក្សរ
បន្ទា ប់
o ធ្វើរបៀបនេះរហូតដល់អស់តួអក្សរ
o ប្រសិនបើប្រៀបធៀបរហូតដល់តួអក្សរចុងក្រោយហើយគ្មា នខាងណាធំជាងគឺ
មានន័យថាស្មើគ្នា
o ប្រសិនបើប្រៀបធៀបតួអក្សរដូចគ្នា អក្សរតូចគឺធំជាងអក្សរធំ

៦.២ ការប្រៀបធៀបរវាងប្រភេទទិន្នន័យខុសគ្នា
នៅពេលដែលប្រៀបធៀបតម្លៃពីរដែលមានប្រភេទទិន្នន័យខុសគ្នា JavaScript នឹងធ្វើការ
ផ្លា ស់ ប្តូរតម្លៃទំាងពីរនោះទៅជា Number។
console.log("2" > 1); => លទ្ធផលពិត

៦.៣ Strict equality
Strict equality តំណាងដោយសញ្ញា ស្មើ៣ ( === ) ហើយវាខុសគ្នា ពី Equality

comparison ( == ) គឺ Strict equality ប្រៀបធៀបទំាងតម្លៃនិងប្រភេទទិន្នន័យរបស់តម្លៃ
នោះ ចំនែកឯ Equality comparison ប្រៀបធៀបតែតម្លៃប៉ុណ្ណោះ។

៦.៤ លទ្ធផលចំលែកនៅពេលប្រៀបធៀប null vs 0
នៅពេលដែលធ្វើការប្រៀបធៀប, JavaScript ចាត់ទុក null ស្មើទៅនឹង 0 ។ ប៉ុន្តែមកមើល
លទ្ធ ផលទំាង៤ខាងក្រោមវិញ៖
console.log(null == 0);
console.log(null > 0);
console.log(null < 0);
console.log(null >= 0);

៧. Conditional branching: if, ‘?’
ពេលខ្លះយើងចង់បានលទ្ធផលផ្សេងៗគ្នា អាស្រ័យលើលក្ខណ្ឌ នៅពេលដែលយើងធ្វើការ
ប្រៀប ធៀប។ ដើម្បីធ្វើដូច្នេះបានយើងអាចប្រើ if statement និង conditional
operator ( ? : )។

៧.១ The “if” statement
if ( … ) statement ធ្វើការវាយតម្លៃលក្ខខណ្ឌ ដែលស្ថិតនៅក្នុងវង់ក្រចក ( parentheses )
ហើយប្រសិនបើលទ្ធផលពិត ( true ) វានឹងដំណើ រការ ( execute ) សំណុំ នៃ
កូដទាំងនោះ
(block of code )។
const age = 18;
if (age >= 18) {
console.log("You are adult");

៧.២ Boolean conversion
if ( … ) statement ធ្វើការវាយតម្លៃ expression ដែលស្ថិតនៅក្នុងវង់ក្រចករបស់វា
ហើយធ្វើ ការបម្លែងលទ្ធផលទៅជា Boolean ( true ឬfalse )។
falsy value មានដូចជា 0, -0, undefined, null, empty string ( "" ), និង NaN ក្រៅពី
នេះគឺ truthy value ទំាងអស់។
truthy គឺរាល់តម្លៃណាដែល returns ពិត ( true )។

៧.៣ The “else” clause
if ( … ) statement អាចមានឬមិនមាន “else” block។ ប្រសិនបើមាន “else” block
វានឹង ដំណើ រការនៅពេល “if” block វាយតម្លៃលទ្ធផលមកមិនពិត ( false )។
const age = 18;
if (age >= 18) {
} else {
console.log("You aren't an adult yet!");

៧.៤ Several conditions: “else if”
const age = 18;
if (age >= 18) {
} else if (age >= 15) {
console.log("You are teenager");
} else {
console.log("You are still a kid");

៧.៤ Conditional operator “ ? : ”
ដំណើ រការរបស់ Conditional operator ដូចទៅនឹង if, else ដែរ។ ប៉ុន្តែគេប្រើវាសម្រាប់តែលក្ខណ្ឌ
ពីរ ជម្រើសតែប៉ុណ្ណោះ ( យើងអាចប្រើប្រាស់ conditional operator សម្រាប់លក្ខណ្ឌ ច្រើន
ជម្រើសដូចទៅនឹង if, else if, else ដែរ បន្តែជាទូទៅគេមិនណែនំាឱ្យប្រើបែបនេះទេពីព្រោះវាងាយនឹងច្រឡំ
និងមានភាពស្មុគ ស្មា ញ )។

លំហាត់
ចូរប្រើប្រាស់ if, else if, ហើយនិង else ដើម្បីបង្ហា ញថ្ងៃនីមួយៗតាមរយៈ console.log ។
ឧទាហរណ៍ ៖ let day = “Monday”; ដូចនេះនៅលើផ្ទាំង console ត្រូវ
បង្ហា ញថា “Today is Monday.”។ បើ let day = “Tuesday”; ដូចនេះនៅលើផ្ទាំង
console ត្រូវបង្ហា ញថា “Today is Tuesday.”។

៨. Logicaloperators
• នៅក្នុង JavaScript programming មាន logical operators បួនប្រភេទ។
o || ( OR ) logical operator
o && ( AND ) logical operator
o ! ( NOT ) logical operator
o ?? ( Nullish Coalescing ) logical operator

៨.១ Logical operator (OR) ||
Logical operator ( OR ) ធ្វើការពិនិត្យមើលតម្លៃដែលនៅខាងឆ្វេង (||) បើពិតវានឹង
return ពិតហើយបញ្ឈប់ដំណើ រការ បើមិនពិតវាធ្វើការពិនិត្យមើលតម្លៃដែលនៅខាងស្តាំ (||)
ទៀត បើ តម្លៃនោះពិតវានឹង return ពិត បើមិនដូច្នោះទេវា return មិនពិត។ មានន័យថាឱ្យតែម្ខា ង
ណា ពិតនោះវានឹង return ពិត។

៨.២ Logical operator (AND) &&
logical operator ( AND ) ទាល់តែតម្លៃដែលនៅសងខាង ( && ) ពិតទាំងពីរបានវា
return ពិត បើមិនដូច្នោះទេវា return មិនពិត។

៨.៣ Logical operator (NOT) !
Logical operator ( NOT ) ឬហៅថា exclamation mark ( ! ), ធ្វើការបញ្ច្រា សតម្លៃរបស់
អញ្ញ ត្តិ បើតម្លៃនោះពិតទៅជាមិនពិត បើមិនពិតទៅជាពិត។

៨.៤ Nullish coalescing operator “??”
Nullish coalescing operator តំណាងដោយនិមិត្តសញ្ញា two question marks “ ?? ” ។
វា ចាត់ទុក null និង undefined គឺដូចគ្នា ។ Nullish coalescing operator នឹងធ្វើការ return
argument ទី១ប្រសិនបើវាមិនមែនជា null ឬក៏ undefined, បើមិនដូច្នោះ argument ទី២
នឹង ត្រូវបាន return ទោះបីជា argument ទី២ជា null ឬក៏ undefinedក៏ដោយចុះ។

const a = null;
const b = null;
const c = a ?? b;
console.log("c: ", c);

លំហាត់
ចូររកអញ្ញ ត្តិដែលមានតម្លៃធំជាងគេក្នុងចំណោមអញ្ញ ត្តិទំាងបួនខាងក្រោមដោយ
ប្រើប្រាស់
if, else if, else រួមទាំងlogical operator។
let a = 10;
let b = -8;
let c = 12;
let d = 2;

៩. Loops: while, do…while និង for loop
Loop គឺជាសកម្មភាពដដែលៗ, ដំណើ រការរបស់ loops គឺដំណើ រការកូដដដែលៗ

( repeat the same code ) ច្រើនដងតាមតម្រូវការរបស់អ្នកសរសេរកូដរហូតដល់ជួបលក្ខណ្ឌ
ពិតបានបញ្ច ប់ ដំណើ រការ។

៩.១ The “while” loop
Syntax របស់while loop ៖
while (condition) {
// block code ឬហៅថា body loop
while loop នឹងដំណើ រការ block code នៅពេលដែលលក្ខណ្ឌ (condition)

ពិតតែប៉ុណ្ណោះ។

៩.២ The “do…while” loop
Syntax របស់while loop ៖
do {
} while (condition);
do…while loop ដំណើ រការ block code ហើយបានពិនិត្យមើលលក្ខណ្ឌ បើលក្ខណ្ឌ ពិត

នឹងបន្ត ដំណើ រការ block code ទៀត បើមិនពិតបញ្ច ប់ដំណើ រការ loop។ ចំនុចខុសគ្នា រវាង
while loop និង do…while loop គឺ while loop ទាល់តែលក្ខណ្ឌ ពិតបាន block code ត្រូវ
បានដំណើ រការ ប៉ុន្តែ do…while loop វិញទោះបីជាលក្ខណ្ឌ មិនពិតក៏បានដំណើ រការ block
code មួយដងដែរ។

៩.៣ The “for” loop
for loop គឺស្មុគស្មា ញជាង while loopនិង do…while loop បន្តិច ប៉ុន្តែភាគច្រើននៃអ្នក
សរសេរកូដចូលចិត្តប្រើប្រាស់ for loop ។
Syntax របស់for loop ៖
for (begin; condition; step) {

for loop
begin
let i = 0; ដំណើ រការតែម្តងគត់នៅក្នុង for loop
condition
i < 5; ពិនិត្យរាល់រង្វិលជុំនីមួយៗរបស់ loop
( loop iteration ) ប្រសិនបើមិនពិត
loop នឹងត្រូវបានបញ្ច ប់។

body loop
console.log(“i: ” , i); ដំណើ រការម្តងហើយម្តងទៀតនៅពេល
លក្ខណ្ឌ ពិត
step
i++ ធ្វើការកើនតម្លៃរបស់អញ្ញ ត្តិ “i” ម្តងមួយ
រាល់រង្វិលជុំរបស់ loop ( មួយជុំកើនតម្លៃ

មួយ )
៩.៤ Breaking the loop
ពេលខ្លះយើងមិនចង់ឱ្យ loop ដំណើ រការរហូតដល់ជួបលក្ខណ្ឌ មិនពិតបានឈប់ទេ។
ដូចនេះ យើងអាចប្រើ “break” reserved word ដើម្បីបញ្ច ប់ដំណើ រការរបស់ loop
បន្ទា ប់ពីជួបលក្ខណ្ឌ ដែលយើងចង់បាន។

៩.៥ Continue to the next iteration
“continue” reserved word ប្រើសម្រាប់រំលងមួយរង្វិលជុំ ( skip an iteration ) នៅពេល
ដែលជួបលក្ខណ្ឌ ដែលយើងបានកំណត់។

លំហាត់
ចូរធ្វើការបង្ហា ញលេខគូ និងលេខសេសក្នុងចន្លោះលេខ
ពី១ដល់១៥ និងធ្វើការរំលងលេខ៩ដោយប្រើប្រាស់ continue reserved
word។

១០. The “switch” statement
Switch statement អាចប្រើជំនួស if statement។ យើងគួរប្រើវានៅពេលយើងត្រូវការ
តែ មួយជម្រើសក្នុងជម្រើសជាច្រើនដែលមានការកំណត់ត្រឹមត្រូវ។

លំហាត់
ចូរប្រើប្រាស់ switch statement ដើម្បីធ្វើការបង្ហា ញឈ្មោះខែមួយក្នុងចំណោមខែទំាង១២នៅ ពេលដែលអ្នក
ប្រើប្រាស់ ( user ) ធ្វើការបញ្ចូ លតម្លៃតាមរយៈ prompt ។ ឧទាហរណ៍ ៖ យើង មានអញ្ញ ត្តិ “month” ស្មើនឹង prompt
( “បញ្ចូ លខែ១ក្នុងចំណោមទាំង១២” ); ហើយនៅ ពេល ដែល user បញ្ចូ ល “ឧសភា” ត្រូវបង្ហា ញលទ្ធផលនៅលើផ្ទាំង
console ថា “ខែនេះគឺជាខែឧស ភា” បើ user បញ្ចូ ល “មិថុនា” ត្រូវបង្ហា ញលទ្ធផលនៅលើផ្ទាំង console ថា “ខែនេះគឺជាខែ
មិថុនា”។

១១. Functions
Functions គឺជាបណ្តុំ នៃកូដ ដែលយើងប្រើសម្រាប់ដោះស្រាយបញ្ហា ជាក់លាក់ណាមួយ។ សារៈ សំខាន់របស់
functions មានដូចជា៖
1. ងាយស្រួលក្នុងរកកំហុសឆ្គង និងធ្វើការកែតម្រូវតែមួយកន្លែង កន្លែងផ្សេងទៀតក៏ត្រូវបានកែតម្រូវ
2. សរសេរមួយដងប្រើបានច្រើនកន្លែងដោយពុំចាំបាច់សរសេរកូដដដែលៗ
3. សម្រាប់ដោះស្រាយបញ្ហា ស្មុគស្មា ញ
យើងបានប្រើខ្លះៗហើយដូចជា alert( text ), prompt( message, [default] ) ទាំងនេះ សុទ្ធតែជា built-in functions
នៅក្នុងភាសា JavaScript ។
ចំណាំ៖ built-in functions គឺជា functions ទំាងឡាយណាដែលមានស្រាប់ដោយយើង គ្រាន់ តែហៅមកប្រើតែប៉ុណ្ណោះ។

១១.១ ការប្រកាស Function ( Function Declaration )
function sayHello () {
console.log("Hello Rotana!");

១១.២ Local variables
Local variables គឺជាអញ្ញ ត្តិដែលស្ថិតនៅក្នុង function block ដោយមាន opening curly
brace “ { ” និង closing curly brace “ } ” ក្តោ បសងខាង។
function sayHello () {
const greetings = "Hello sir, how are you doing?";
console.log(greetings);
នៅក្នុង function sayHello, អញ្ញ ត្តិ “greetings” គឺជា local variable។ យើងមិនអាចយក
“greetings” មកប្រើនៅខាងក្រៅ function sayHello បានទេ។ បើយើងយកមកប្រើនៅខាង ក្រៅ
នោះនឹងមាន Error កើតឡើង។

១១.៣ Outer variables
ប្រសិនបើយើងចង់ប្រើអញ្ញ ត្តិដែលអាចប្រើទំាងក្នុង function block ផង និងនៅក្រៅ function
block ផងយើងប្រើ outer variable។
* រាល់អញ្ញ ត្តិទាំងអស់ដែលស្ថិតនៅក្រៅ function block គឺជា outer variable ឬអាចហៅថា
ជា global variable។

១១.៤ Parameters
យើងអាចបញ្ចូ នទិន្នន័យទៅកាន់ function block តាមរយៈ parameters។

១១.៥ Default values
នៅពេលដែល function ត្រូវបានហៅប៉ុន្តែ argument មិនត្រូវបានផ្តល់ឱ្យ នោះតម្លៃរបស់
parameter នឹងស្មើ undefined។
function sayHello(hello) {
console.log(hello, “John”);
sayHello();

តម្លៃរបស់ parameter “ hello ” ស្មើនឹង undefined ដូចនេះលទ្ធផលដែលបង្ហា ញនៅលើផ្ទាំង console គឺ “ Hello:
undefined ”។ ដើម្បីកុំឱ្យតម្លៃរបស់ parameter “hello” ស្មើនឹង undefined យើងអាចប្រើ default values។
function sayHello(hello = "hey,") {
console.log(hello, "John");

១១.៦ Alternative default parameters
ប្រសិនបើយើងមិនចង់ប្រើប្រាស់ default values ( default parameters ) ទេយើងមាន វិធី
សាស្រ្តមួយទៀតគឺប្រើប្រាស់ if statement ដើម្បីធ្វើការពិនិត្យមើលតម្លៃរបស់ parameter នោះ។
function sayHello(hello) {
if (hello == undefined) {
hello = "Hey, guy!";
console.log("Hello = ", hello);
sayHello();

១១.៧ Returning a value
function អាចធ្វើការ return តម្លៃត្រលប់ទៅកាន់ function call វិញ។
function sum (num1, num2) {
return num1 + num2;
const result = sum(2, 5);
console.log(`Result: ${result}`);
ចំណាំ៖ function ដែលអត់មាន return ឬក៏ return ទទេ, function នោះស្មើនឹង return undefined ។

១១.៨ ការដាក់ឈ្មោះឱ្យ function (naming a function)
ដោយសារតែ function គឺជាសកម្មភាពមួយដែលយើងប្រើសម្រាប់ដោះស្រាយបញ្ហា ដូចនេះ ឈ្មោះ
របស់វាគឺគួរតែជាកិរិយាស័ព្ទ។
• calculateSum(…) គណនាផលបូកហើយ return តម្លៃ
• getName(…) return ឈ្មោះ
• setName(…) ផ្តល់តម្លៃទៅឱ្យឈ្មោះ
• getData(…) return ទិន្នន័យ
• checkPermission(…) return true ឬក៏ false ។ល។
គោលការណ៍ ដែលគួរអនុវត្តតាម one function – one action ។

១១.៩ Function = = Comments
ដោយសារតែការដាក់ឈ្មោះឱ្យ function គឺគប្បីខ្លីហើយមានន័យគ្រប់គ្រាន់ នោះគឺ
មានន័យថា ស្មើនឹងយើងធ្វើការកំណត់ចំណាំ ( comments ) ថាកន្លែងនឹងជាអ្វី ធ្វើអ្វី ។ល។

១២. Function expressions
នៅក្នុងចំនុច ១១.១ យើងបានរៀនអំពី function declaration រួចហើយ។ នៅក្នុងចំនុចនេះ
យើងនឹងទៅស្វែងយល់អំពី function expressions វិញម្តង។
let sayHello = function () {
};

ការប្រើប្រាស់ function expressions មានលក្ខណៈខុសពី function declaration។
• Function declaration
o នៅពេលដែល JavaScript ដំណើ រការកម្មវិធីគឺវាធ្វើការ execute function declaration មុនគេ
បន្ទា ប់មកបានវាធ្វើការពីខាងលើចុះមកក្រោម។ មានន័យថាទោះបីជា function declaration
សរសេរនៅខាងលើគេឬនៅខាងក្រោមគេក៏ JavaScript ធ្វើការ execute វាមុនគេដដែល។
sum(10, 8); //លទ្ធផលគឺ 18 បង្ហា ញនៅលើផ្ទាំង console ដោយមិនមាន Error
function sum (num1, num2) {
console.log(num1 + num2)

• Function expressions
o នៅពេលដែល JavaScript ដំណើ រការកម្មវិធីគឺវាមិនបានចាត់ទុក function expressions ថាជា
លក្ខណៈពិសេសដែលត្រូវ execute មុនគេទេ។ ដូចនេះការប្រកាស function expressions
នៅកន្លែងណា និងការ call ហៅ function មកប្រើនៅកន្លែងណាគឺជាបញ្ហា ដែលយើងត្រូវ
យល់ដឹងទំាងអស់គ្នា ។
sayHello(); // Error (ReferenceError) មិនអាច access sayHello មុននឹងប្រកាស
let sayHello = function () {
};

១៣. Arrow functions, the basics
នៅពេលនិយាយដល់ function expressions យើងមិនត្រួវភ្លេច arrow functions ទេ។
ជា ទូទៅអ្នកសរសេរកូដតែងតែប្រើ arrow functions ជំនួស function expressions
ក៏ព្រោះតែ arrow functions ខ្លីនិងងាយស្រួលប្រើជាង អ្វីដែលពិសេសគឺ arrow functions
គឺជា version ថ្មី។
let sum = (a, b) => a + b;

១៣.១ Multiline arrow functions
ប្រសិនបើ body របស់ arrow functions មានតែមួយជួរទេគឺយើងអាចសរសេរបែបនេះ
បាន
let sum = (a, b) => a + b;។
ប៉ុន្តែបើមានចាប់ពីពីរជួរឡើងទៅយើងត្រូវតែប្រើ opening និង closing curly brace ( { }

)។
let sum = (a, b) => {
let result = a + b;
return result;
};

លំហាត់
ចូរផ្លា ស់ប្តូរ functions ខាងក្រោមទៅជា arrow functions ទំាងអស់។ ប្រសិនបើ
function នោះមាន body តែមួយជួរទេត្រូវតែប្រើប្រាស់របៀបខ្លីដោយមិនមាន (
{ } )។
let sum;
let pen = 10;
let book = 20;
let tax = 1;

const calculateTotal = function () {
sum = function (a, b) {
return a + b;
};
const subTotal = sum(pen, book);
return subTotal + (subTotal * tax) / 100;
};
console.log(calculateTotal());
console.log(sum(pen, book));

សេចក្តីសង្ខេបរួមមេរៀនទី២
នៅក្នុងមេរៀនទី២នេះយើងបានសិក្សាអំពីមូលដ្ឋា នគ្រឹះភាសា JavaScript

ដូចជា៖ អញ្ញ ត្តិ, ប្រភេទទិន្នន័យ, basic operators, comparisons, conditional branching,
loop, switch, functions, និង arrow functions។

សូមអរគុណ!

Lesson 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 2

Uploaded by

Copyright:

Available Formats

ម៉ា ស្ទ័រអាយធី

វគ្គ៖ JAVASCRIPT FROM BEGGINER TO ADVANCED

លោកគ្រូ៖ ផេងពុទ្ធា រិទ្ធ

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

វគ្គសិក្សា JavaScript from beginner to advanced​ របស់សាលាម៉ា ស្ទ័រអាយធីជាវគ្គសិក្សាស្តីអំពី

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

១. ចេះមូលដ្ឋា នគ្រឹះដល់ advanced features របស់ JavaScript

៣. អនុវត្តន៍ Bank transaction ( ដកនិងដាក់លុយ នៅលើផ្ទាំង Console )

៤. ចេះប្រើប្រាស់ Online IDE ដោយពុំចាំបាច់ដំឡើងកម្មវិធីអ្វីទាំងអស់នៅលើកុំព្យូទ័រ

៥. មានមូលដ្ឋា នគ្រឹះអាចបន្តទៅផ្នែក Front-end​ឬ Back-end​ឬ ទាំងពីរក៏បាន

៦. មានសមត្ថភាពគ្រប់គ្រាន់ និងទំនុកចិត្តដើម្បីបន្តចាប់យក Frameworks របស់ ​JavaScript

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

ឧ.ទ៖ document.write("Hello World!");

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

ឧ.ទ៖ console.log("Hello World!");

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

ប៊ូតុង ok​ឬ Esc key ដើម្បីបិទវិញ។

ឧ.ទ៖ console.log("Hello World!");

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

let result = prompt(title, [default]);

* square brackets ([ ]) នៅសងខាង default តំណាងឱ្យមានក៏បានអត់ក៏បាន (optional)។

let result = prompt("Enter any number");

console.log("Result: ", result);

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

ប្រកាសអញ្ញ ត្តិច្រើននៅលើជួរតែមួយ (Declare multiple variables in one line) ៖

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

តម្លៃរបស់អញ្ញ ត្តិនៅក្នុង JavaScript គឺតែងតែមានប្រភេទរបស់វាដូចជា Boolean, String

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

let num = 123;

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

const book = ‘Cambodia History’;

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

const isTrue = true;

const isFalse = false;

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

let sum = null;

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

ជាទូទៅ​ operator​s ​និង ​functions ភាគច្រើនផ្លា ស់ប្តូរប្រភេទតម្លៃរបស់អញ្ញ ត្តិដែលយើង

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

let num = 123;

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

ចំណាំ៖ ប្រសិនបើយើងប្រើប្រាស់ arithmetic operation ( ​+ ) វានឹងប្តូរទៅជា

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

falsy value គឺរាល់តម្លៃទំាងឡាយណាដែល returns មិនពិត ( false )។

truthy value គឺជារាល់តម្លៃទំាងឡាយណាដែល returns ពិត ( true )។

MASTERIT CAMBODIA JAVASCRIPT BEGINNER TO ADVANCED

ឧទាហរណ៍ ៖ 8 + 2; 8 និង 2 គឺជា operand។

Unary operator គឺជា operator ដែលមានតែមួយ operand។ ភាគច្រើនយើងប្រើ​

ឧទាហរណ៍ ៖ let y = 10;

(–) គឺជា operator, (y) គឺជា operand

វគ្គសិក្សា JavaScript from beginner to advanced របស់សាលាម៉ា ស្ទ័រអាយធីជាវគ្គសិក្សាស្តីអំពី

៥. មានមូលដ្ឋា នគ្រឹះអាចបន្តទៅផ្នែក Front-endឬ Back-endឬ ទាំងពីរក៏បាន

៦. មានសមត្ថភាពគ្រប់គ្រាន់ និងទំនុកចិត្តដើម្បីបន្តចាប់យក Frameworks របស់ JavaScript

ប៊ូតុង okឬ Esc key ដើម្បីបិទវិញ។

ជាទូទៅ operators និង functions ភាគច្រើនផ្លា ស់ប្តូរប្រភេទតម្លៃរបស់អញ្ញ ត្តិដែលយើង

ចំណាំ៖ ប្រសិនបើយើងប្រើប្រាស់ arithmetic operation ( + ) វានឹងប្តូរទៅជា

Unary operator គឺជា operator ដែលមានតែមួយ operand។ ភាគច្រើនយើងប្រើ

ឧទាហរណ៍ ខាងលើគឺ operator ( * ) មានអាទិភាពខ្ពស់ជាង operator ( – )។

if, else if, else រួមទាំងlogical operator។

Loop គឺជាសកម្មភាពដដែលៗ, ដំណើ រការរបស់ loops គឺដំណើ រការកូដដដែលៗ

// block code ឬហៅថា body loop

// block code ឬហៅថា body loop

Syntax របស់for loop ៖