msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

Merge c4a974937f into 29e4101818

Browse Source
pull/803/merge
HS-pheng 9 months ago committed by GitHub
parent 29e4101818 c4a974937f
commit 7a5ef23386
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
94 changed files with 6405 additions and 0 deletions
Show Stats Download Patch File Download Diff File

986
Khmer/02_Day_Data_types/02_day_data_types.md
Unescape View File

@ -0,0 +1,986 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: ប្រភេទទិន្នន័យ </h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> មករា, 2020</small>
</sub>
</div>
</div>
[<< ថ្ងៃទី ១](../readMe.md) | [ថ្ងៃទី ៣ >>](../03_Day_Booleans_operators_date/03_booleans_operators_date.md)
![Thirty Days Of JavaScript](../images/banners/day_1_2.png)
- [📔 ថ្ងៃទី​ ២](#-day-2)
- [ប្រភេទទិន្នន័យ](#data-types)
- [ប្រភេទទិន្នន័យបឋម](#primitive-data-types)
- [ប្រភេទទិន្នន័យមិនបឋម](#non-primitive-data-types)
- [Numbers](#numbers)
- [ការប្រកាសប្រភេទទិន្នន័យ Numbers](#declaring-number-data-types)
- [Math Object](#math-object)
- [ការបង្កើតលេខចៃដន្យ](#random-number-generator)
- [Strings](#strings)
- [ការភ្ជាប់ String](#string-concatenation)
- [ការភ្ជាប់ដោយប្រើសញ្ញាបូក](#concatenating-using-addition-operator)
- [Long Literal Strings](#long-literal-strings)
- [Escape Sequences នៅក្នុង Strings](#escape-sequences-in-strings)
- [Template Literals (Strings គំរូ)](#template-literals-template-strings)
- [String Methods](#string-methods)
- [ការពិនិត្យមើលនិងផ្លាស់ប្តូរប្រភេទទិន្នន័យ](#checking-data-types-and-casting)
- [ពិនិត្យប្រភេទទិន្នន័យ](#checking-data-types)
- [ការផ្លាស់ប្តូរប្រភេទទិន្នន័យ (Casting)](#changing-data-type-casting)
- [String ទៅចំនួនគត់](#string-to-int)
- [String ទៅចំនួនទសភាគ](#string-to-float)
- [ចំនួនទសភាគទៅចំនួនគត់](#float-to-int)
- [💻 លំហាត់សម្រាប់ថ្ងៃទី ២](#-day-2-exercises)
- [លំហាត់៖ កម្រិត ១](#exercise-level-1)
- [លំហាត់៖ កម្រិត ២](#exercise-level-2)
- [លំហាត់៖ កម្រិត ៣](#exercises-level-3)
# 📔 Day 2
## ប្រភេទទិន្នន័យ
នៅក្នុងផ្នែកមុន យើងបានរៀបរាប់បន្តិចអំពីប្រភេទទិន្នន័យ។ ទិន្នន័យ ឬតម្លៃមានប្រភេទទិន្នន័យ។ ប្រភេទទិន្នន័យពិពណ៌នាអំពីលក្ខណៈនៃទិន្នន័យ។ ប្រភេទទិន្នន័យអាចបែងចែកជាពីរ៖
1. ប្រភេទទិន្នន័យបឋម
2. ប្រភេទទិន្នន័យមិនបឋម (Object references)
### ប្រភេទទិន្នន័យបឋម
ប្រភេទទិន្នន័យបឋមនៅក្នុង JavaScript រួមមាន::
1. Number - ចំនួនគត់, ចំនួនទសភាគ
2. String - ទិន្នន័យណាមួយនៅក្រោម single quote, double quote និង backtick quote
3. Booleans - តម្លៃពិតឬមិនពិត
4. Null - តម្លៃទទេ ឬគ្មានតម្លៃ
5. Undefined - អថេរដែលបានប្រកាសដោយគ្មានតម្លៃ
6. Symbol - តម្លៃពិសេសមួយដែលអាចបង្កើតដោយ Symbol constructor
ប្រភេទទិន្នន័យដែលមិនមែនបឋមនៅក្នុង JavaScript រួមមាន:
1. Objects
2. Arrays
ឥឡូវនេះ យើងមើលថាតើប្រភេទទិន្នន័យបឋម និងមិនមែនបឋមមានន័យដូចម្តេច។
ប្រភេទទិន្នន័យបឋម គឺជាប្រភេទទិន្នន័យដែលមិនអាចកែប្រែបាន។ នៅពេលដែលប្រភេទទិន្នន័យបឋមត្រូវបានបង្កើត យើងមិនអាចកែប្រែវាបានទេ។
**ឧទាហរណ៍:**
```js
let word = "JavaScript";
```
ប្រសិនបើយើងព្យាយាមកែប្រែខ្សែអក្សរដែលរក្សាទុកក្នុងអថេរ _word_ នោះ JavaScript គួរតែបង្កើត error។ ប្រភេទទិន្នន័យណាមួយនៅក្រោម single quote, double quote, រឺ backtick quote គឺជាប្រភេទទិន្នន័យខ្សែអក្សរ។
```js
word[0] = "Y";
```
កន្សោមនេះមិនផ្លាស់ប្តូរ string ដែលរក្សាទុកក្នុងអថេរ _word_ ទេ។ ដូច្នេះ យើងអាចនិយាយបានថា string មិនអាចកែប្រែបានទេ។
ប្រភេទទិន្នន័យបឋមត្រូវបានប្រៀបធៀបដោយតម្លៃរបស់វា។ ឥឡូវ​នេះយើងប្រៀបធៀបតម្លៃទិន្នន័យផ្សេងៗគ្នា។ សូមមើលឧទាហរណ៍ខាងក្រោម៖
```js
let numOne = 3;
let numTwo = 3;
console.log(numOne == numTwo); // ពិត
let js = "JavaScript";
let py = "Python";
console.log(js == py); // មិនពិត
let lightOn = true;
let lightOff = false;
console.log(lightOn == lightOff); // មិនពិត
```
### ប្រភេទទិន្នន័យមិនបឋម
ប្រភេទទិន្នន័យមិនបឋមគឺអាចកែប្រែបាន ឬអាចផ្លាស់ប្តូរបាន។ យើងអាចកែប្រែតម្លៃនៃប្រភេទទិន្នន័យដែលមិនមែនបឋមបន្ទាប់ពីបង្កើតវា។
យើងអាចមើលឃើញដោយបង្កើត Array។ ​Array គឺជាបញ្ជីតម្លៃទិន្នន័យក្នុងតង្កៀបការ៉េ។ Array អាចមានប្រភេទទិន្នន័យដូចគ្នា ឬផ្សេងគ្នា។ តម្លៃ Array ត្រូវបានយោងដោយ index របស់ពួកគេ។ នៅក្នុង Array index JavaScript ចាប់ផ្តើមនៅសូន្យ។ I.e. ធាតុទីមួយនៃ Array ត្រូវបានរកឃើញនៅ index សូន្យ ធាតុទីពីរនៅ index មួយ និងធាតុទីបីនៅ index ទីពីរ។ល។
```js
let nums = [1, 2, 3];
nums[0] = 10;
console.log(nums); // [10, 2, 3]
```
ដូចដែលអ្នកអាចឃើញ Array ដែលជាប្រភេទទិន្នន័យដែលមិនបឋមគឺអាចផ្លាស់ប្តូរបាន។ ប្រភេទទិន្នន័យដែលមិនមែនបឋមមិនអាចប្រៀបធៀបតាមតម្លៃបានទេ។ ទោះបីជាប្រភេទទិន្នន័យដែលមិនមែនជាបឋមពីរមានលក្ខណៈសម្បត្តិ និងតម្លៃដូចគ្នាក៏ដោយ ពួកវាមិនស្មើគ្នាយ៉ាងតឹងរ៉ឹងទេ។
```js
let nums = [1, 2, 3];
let numbers = [1, 2, 3];
console.log(nums == numbers); // មិនពិត
let userOne = {
name: "Asabeneh",
role: "teaching",
country: "Finland",
};
let userTwo = {
name: "Asabeneh",
role: "teaching",
country: "Finland",
};
console.log(userOne == userTwo); // មិនពិត
```
យើងមិនប្រៀបធៀបប្រភេទទិន្នន័យដែលមិនមែនបឋមទេ។ កុំប្រៀបធៀប Array, Functions ឬ Objects។
តម្លៃ​ដែល​មិន​មែន​បឋម​ត្រូវ​បាន​គេ​ហៅ​ថា​ជា​ប្រភេទ​ reference​ ព្រោះ​វា​ត្រូវ​បាន​គេ​ប្រៀបធៀប​ដោយ​ reference ​ជា​ជាង​តម្លៃ។ វត្ថុពីរគឺស្មើគ្នាយ៉ាងតឹងរ៉ឹង ប្រសិនបើពួកគេសំដៅទៅលើវត្ថុមូលដ្ឋានដូចគ្នា។
```js
let nums = [1, 2, 3];
let numbers = nums;
console.log(nums == numbers); // ពិត
let userOne = {
name: "Asabeneh",
role: "teaching",
country: "Finland",
};
let userTwo = userOne;
console.log(userOne == userTwo); // ពិត
```
ប្រសិនបើអ្នកមានការលំបាកក្នុងការយល់ដឹងពីភាពខុសគ្នារវាងប្រភេទទិន្នន័យបឋម និងប្រភេទទិន្នន័យដែលមិនបឋម អ្នកមិនមែនជាមនុស្សតែម្នាក់នោះទេ។ ស្ងប់ស្ងាត់ចុះ ហើយគ្រាន់តែទៅផ្នែកបន្ទាប់ ហើយព្យាយាមត្រឡប់មកវិញបន្ទាប់ពីពេលខ្លះ។ ឥឡូវនេះអនុញ្ញាតឱ្យយើងចាប់ផ្តើមប្រភេទទិន្នន័យតាមប្រភេទលេខ។
## Numbers
Numbers គឺជាចំនួនគត់ និងតម្លៃទសភាគដែលអាចធ្វើប្រតិបត្តិការនព្វន្ធទាំងអស់។
តោះមើលឧទាហរណ៍មួយចំនួននៃលេខ។
### ការប្រកាសប្រភេទទិន្នន័យ Numbers
```js
let age = 35;
const gravity = 9.81; // យើងប្រើ const សម្រាប់តម្លៃមិនផ្លាស់ប្តូរ
let mass = 72; // ម៉ាស់គិតជាគីឡូក្រាម
const PI = 3.14; // pi ជាតម្លៃថេរ
// ឧទាហរណ៍ច្រើនទៀត
const boilingPoint = 100; // ចំណុចរំពុះនៃទឹករ
const bodyTemp = 37; // សីតុណ្ហភាពរាងកាយរបស់មនុស្សជាមធ្យម
console.log(age, gravity, mass, PI, boilingPoint, bodyTemp);
```
### Math Object
នៅក្នុង JavaScript Math Object ផ្តល់នូវវិធីសាស្រ្តជាច្រើនដើម្បីធ្វើការជាមួយលេខ។
```js
const PI = Math.PI;
console.log(PI); // 3.141592653589793
// បង្គត់ទៅលេខជិតបំផុត។
// ឡើងលើបើ .5 ឡើង ចុះក្រោមបើ 0.5 ចុះ
console.log(Math.round(PI)); // 3 ដើម្បីបង្គត់តម្លៃទៅលេខដែលនៅជិតបំផុត។
console.log(Math.round(9.81)); // 10
console.log(Math.floor(PI)); // 3 បង្គត់ចុះ
console.log(Math.ceil(PI)); // 4 បង្គត់ឡើង
console.log(Math.min(-5, 3, 20, 4, 5, 10)); // -5, ឲតម្លៃអប្បបរមា
console.log(Math.max(-5, 3, 20, 4, 5, 10)); // 20, ឲតម្លៃអតិបរមា
const randNum = Math.random(); // បង្កើតលេខចៃដន្យរចន្លោះពី 0 ទៅ 0.999999
console.log(randNum);
// យើងបង្កើតលេខចៃដន្យពី 0 ទៅ 10
const num = Math.floor(Math.random() * 11); // បង្កើតលេខចៃដន្យពី 0 ទៅ 10
console.log(num);
//តម្លៃ​ដាច់ខាត
console.log(Math.abs(-10)); // 10
//ឫស​ការេ
console.log(Math.sqrt(100)); // 10
console.log(Math.sqrt(2)); // 1.4142135623730951
// ស្វ័យគុណ
console.log(Math.pow(3, 2)); // 9
console.log(Math.E); // 2.718
// លោការីត
// ឲ​លោការីត​ធម្មជាតិ​ជាមួយ​នឹង​គោល E នៃ x, Math.log(x)
console.log(Math.log(2)); // 0.6931471805599453
console.log(Math.log(10)); // 2.302585092994046
// ឲលោការីតធម្មជាតិនៃ 2 និង 10 រៀងគ្នា។
console.log(Math.LN2); // 0.6931471805599453
console.log(Math.LN10); // 2.302585092994046
// ត្រីកោណមាត្រ
Math.sin(0);
Math.sin(60);
Math.cos(0);
Math.cos(60);
```
#### ការបង្កើតលេខចៃដន្យ
JavaScript Math Object មាន random() method generator ដែលបង្កើតលេខពី 0 ដល់ 0.999999999...
```js
let randomNum = Math.random(); // បង្កើត 0 ទៅ 0.999...
```
ឥឡូវនេះ អនុញ្ញាតឱ្យយើងមើលពីរបៀបដែលយើងអាចប្រើ random() method ដើម្បីបង្កើតចំនួនចៃដន្យរពី 0 ទៅ 10:
```js
let randomNum = Math.random(); // បង្កើតលេខពី 0 ទៅ 0.999
let numBtnZeroAndTen = randomNum * 11;
console.log(numBtnZeroAndTen); // នេះផ្តល់ឱ្យតម្លៃ៖ អប្បបរមា 0 និងអតិបរមា 10.99
let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen);
console.log(randomNumRoundToFloor); // នេះផ្តល់ឱ្យតម្លៃចន្លោះពី 0 ទៅ 10
```
## Strings
String គឺជាអត្ថបទដែលស្ថិតនៅក្រោម **_single_** , **_double_**, **_back-tick_** quote។ ដើម្បីប្រកាស String យើងត្រូវការឈ្មោះអថេរ assignment operator និងតម្លៃក្រោម single quote, double quote និង backtick quote។
តោះមើលឧទាហរណ៍ខ្លះនៃ string៖
```js
let space = " "; // string ទទេ
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";
let quote = "The saying,'Seeing is Believing' is not correct in 2020.";
let quotWithBackTick = `The saying,'Seeing is Believing' is not correct in 2020.`;
```
### ការភ្ជាប់ String
ការភ្ជាប់ String ពីរ ឬច្រើនជាមួយគ្នាត្រូវបានគេហៅថា Concatenation។ ដោយប្រើ String ដែលបានប្រកាសនៅផ្នែកមុន៖
```js
let fullName = firstName + space + lastName; // concatenation, merging two string together.
console.log(fullName);
```
```sh
Asabeneh Yetayeh
```
យើងអាចភ្ជាប់ string តាមវិធីផ្សេងៗគ្នា។
#### ការភ្ជាប់ដោយប្រើសញ្ញាបូក
ការភ្ជាប់ដោយប្រើសញ្ញាបូកគឺជាវិធីចាស់។ វិធីនៃការភ្ជាប់គ្នានេះគឺពិបាកនិងងាយមានកំហុស។ វាជាការល្អក្នុងការដឹងពីរបៀបភ្ជាប់តាមវិធីនេះ ប៉ុន្តែខ្ញុំស្នើឱ្យប្រើ ES6 template strings (ពន្យល់នៅពេលក្រោយ)។
```js
// ប្រកាសអថេរផ្សេងៗនៃប្រភេទទិន្នន័យផ្សេងៗគ្នា
let space = " ";
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";
let age = 250;
let fullName = firstName + space + lastName;
let personInfoOne = fullName + ". I am " + age + ". I live in " + country; // ES5 string addition
console.log(personInfoOne);
```
```sh
Asabeneh Yetayeh. I am 250. I live in Finland
```
#### Long Literal Strings
string អាចជាតួអក្សរតែមួយ ឬកថាខណ្ឌ ឬទំព័រមួយ។ ប្រសិនបើប្រវែងខ្សែនេះធំពេក វាមិនសាកសមនឹងបន្ទាត់តែមួយទេ។ យើង​អាច​ប្រើ​តួអក្សរ backslash (\\) នៅ​ខាង​ចុង​បន្ទាត់​នីមួយៗ ដើម្បី​បង្ហាញ​ថា​​អក្សរ​នឹង​បន្ត​នៅ​ជួរ​បន្ទាប់។
**ឧទាហរណ៍:**
```js
const paragraph =
"My name is Asabeneh Yetayeh. I live in Finland, Helsinki.\
I am a teacher and I love teaching. I teach HTML, CSS, JavaScript, React, Redux, \
Node.js, Python, Data Analysis and D3.js for anyone who is interested to learn. \
In the end of 2019, I was thinking to expand my teaching and to reach \
to global audience and I started a Python challenge from November 20 - December 19.\
It was one of the most rewarding and inspiring experience.\
Now, we are in 2020. I am enjoying preparing the 30DaysOfJavaScript challenge and \
I hope you are enjoying too.";
console.log(paragraph);
```
#### Escape Sequences in Strings
នៅក្នុង JavaScript និងភាសាសរសេរកម្មវិធីផ្សេងទៀតការដាក់ \ នៅពីមុកតួអក្សរមួយចំនួនគឺជា escape sequence។ តោះ​មើល​ escape characters ដែលទូទៅបំផុត៖
- \n: បន្ទាត់ថ្មី
- \t: tab មានន័យថា ៨ ចន្លោះ
- \\\\: backslash
- \\': Single quote (')
- \\": Double quote (")
```js
console.log(
"I hope everyone is enjoying the 30 Days Of JavaScript challenge.\nDo you ?"
); // ការបំបែកបន្ទាត់
console.log("Days\tTopics\tExercises");
console.log("Day 1\t3\t5");
console.log("Day 2\t3\t5");
console.log("Day 3\t3\t5");
console.log("Day 4\t3\t5");
console.log("This is a backslash symbol (\\)"); // ដើម្បីសរសេរ backslash
console.log('In every programming language it starts with "Hello, World!"');
console.log("In every programming language it starts with 'Hello, World!'");
console.log("The saying 'Seeing is Believing' isn't correct in 2020");
```
លទ្ធផលនៅក្នុង console
```sh
I hope everyone is enjoying the 30 Days Of JavaScript challenge.
Do you ?
Days Topics Exercises
Day 1 3 5
Day 2 3 5
Day 3 3 5
Day 4 3 5
This is a backslash symbol (\)
In every programming language it starts with "Hello, World!"
In every programming language it starts with 'Hello, World!'
The saying 'Seeing is Believing' isn't correct in 2020
```
#### Template Literals (Strings គំរូ)
ដើម្បីបង្កើត string គំរូ យើងប្រើសញ្ញា back-ticks។ យើងអាចបញ្ចូលទិន្នន័យជាកន្សោមនៅខាងក្នុង string អក្សរគំរូ។ ដើម្បីចាក់បញ្ចូលទិន្នន័យ យើងភ្ជាប់កន្សោមជាមួយនឹងដង្កៀបអង្កាញ់ ({}) ដែលនាំមុខដោយសញ្ញា $ ។ សូមមើល syntax ខាងក្រោម។
```js
//Syntax
`String literal text``String literal text ${expression}`;
```
**ឧទាហរណ៍: 1**
```js
console.log(`The sum of 2 and 3 is 5`); // ការសរសេរទិន្នន័យ
let a = 2;
let b = 3;
console.log(`The sum of ${a} and ${b} is ${a + b}`); // ការបញ្ចូលទិន្នន័យ
```
**ឧទាហរណ៍:2**
```js
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let country = "Finland";
let city = "Helsinki";
let language = "JavaScript";
let job = "teacher";
let age = 250;
let fullName = firstName + " " + lastName;
let personInfoTwo = `I am ${fullName}. I am ${age}. I live in ${country}.`; //ES6 - វិធីសាស្ត្របញ្ចូល string
let personInfoThree = `I am ${fullName}. I live in ${city}, ${country}. I am a ${job}. I teach ${language}.`;
console.log(personInfoTwo);
console.log(personInfoThree);
```
```sh
I am Asabeneh Yetayeh. I am 250. I live in Finland.
I am Asabeneh Yetayeh. I live in Helsinki, Finland. I am a teacher. I teach JavaScript.
```
ដោយប្រើ string គំរូ ឬវិធីសាស្ត្របញ្ចូល string យើងអាចបន្ថែមកន្សោម ដែលអាចជាតម្លៃ ឬប្រតិបត្តិការមួយចំនួន (ការប្រៀបធៀប, ប្រតិបត្តិការនព្វន្ធ, និង ប្រតិបត្តិការ ternary)។
```js
let a = 2;
let b = 3;
console.log(`${a} is greater than ${b}: ${a > b}`);
```
```sh
2 is greater than 3: false
```
### String Methods
អ្វីគ្រប់យ៉ាងនៅក្នុង JavaScript គឺជា object។ string គឺជាប្រភេទទិន្នន័យបឋមដែលមានន័យថាយើងមិនអាចកែប្រែវាបានទេនៅពេលដែលវាត្រូវបានបង្កើត។ string object មាន string method ជាច្រើនដែលអាចជួយយើងឱ្យធ្វើការជាមួយ string។
1. _length_: string _length_ method ឲ​ចំនួន​តួអក្សរ​ក្នុង​ខ្សែអក្សរ​ដែល​រួម​បញ្ចូលទាំង​ចន្លោះ​ទទេ។
**ឧទាហរណ៍:**
```js
let js = "JavaScript";
console.log(js.length); // 10
let firstName = "Asabeneh";
console.log(firstName.length); // 8
```
2. _ការចាប់យកតួអក្សរក្នុង string_៖ យើងអាចចូលប្រើតួអក្សរនីមួយៗក្នុង string ដោយប្រើ index របស់វា។ ក្នុង​ការ​សរសេរ​កម្មវិធី ការ​រាប់​ចាប់​ផ្ដើម​ពី 0។ index ​ទី​មួយ​នៃ​ string គឺ​សូន្យ ហើយ index ​ចុង​ក្រោយ​គឺ​ជា​ប្រវែង​នៃ​ខ្សែ​អក្សរ​ដក​មួយ។
![Accessing sting by index](../images/string_indexes.png)
ឥឡូវ​នេះយើងចូលប្រើតួអក្សរផ្សេងគ្នានៅក្នុង string 'JavaScript' ។
```js
let string = "JavaScript";
let firstLetter = string[0];
console.log(firstLetter); // J
let secondLetter = string[1]; // a
let thirdLetter = string[2];
let lastLetter = string[9];
console.log(lastLetter); // t
let lastIndex = string.length - 1;
console.log(lastIndex); // 9
console.log(string[lastIndex]); // t
```
3. _toUpperCase()_: method នេះផ្លាស់ប្តូរ string ទៅជាអក្សរធំ។
```js
let string = "JavaScript";
console.log(string.toUpperCase()); // JAVASCRIPT
let firstName = "Asabeneh";
console.log(firstName.toUpperCase()); // ASABENEH
let country = "Finland";
console.log(country.toUpperCase()); // FINLAND
```
4. _toLowerCase()_: method នេះផ្លាស់ប្តូរ string ទៅជាអក្សរតូច។
```js
let string = "JavasCript";
console.log(string.toLowerCase()); // javascript
let firstName = "Asabeneh";
console.log(firstName.toLowerCase()); // asabeneh
let country = "Finland";
console.log(country.toLowerCase()); // finland
```
5. _substr()_: វាត្រូវការ arguments ពីរ គឺ index ចាប់ផ្តើម និងចំនួនតួអក្សរដើម្បីកាត់។
```js
let string = "JavaScript";
console.log(string.substr(4, 6)); // Script
let country = "Finland";
console.log(country.substr(3, 4)); // land
```
6. _substring()_: វាត្រូវការ arugments ពីរ គឺ index ចាប់ផ្តើម និង index បញ្ឈប់ ប៉ុន្តែវាមិនរួមបញ្ចូលតួអក្សរនៅ index បញ្ឈប់នោះទេ។
```js
let string = "JavaScript";
console.log(string.substring(0, 4)); // Java
console.log(string.substring(4, 10)); // Script
console.log(string.substring(4)); // Script
let country = "Finland";
console.log(country.substring(0, 3)); // Fin
console.log(country.substring(3, 7)); // land
console.log(country.substring(3)); // land
```
7. _split()_: method នេះបំបែកបំបែក string នៅកន្លែងជាក់លាក់មួយ។
```js
let string = "30 Days Of JavaScript";
console.log(string.split()); // ប្តូរទៅជា array -> ["30 ថ្ងៃនៃ JavaScript"]
console.log(string.split(" ")); // បំបែកទៅជា array នៅចន្លោះ -> ["30", "ថ្ងៃ", "នៃ", "JavaScript"]
let firstName = "Asabeneh";
console.log(firstName.split()); // ប្តូរទៅជា array -> ["Asabeneh"]
console.log(firstName.split("")); // បំបែកទៅជា array នៅអក្សរនីមួយៗ -> ["A", "s", "a", "b", "e", "n", "e", "h"]
let countries = "Finland, Sweden, Norway, Denmark, and Iceland";
console.log(countries.split(",")); // បំបែកទៅជា array នៅសញ្ញាក្បៀស -> ["ហ្វាំងឡង់", "ស៊ុយអែត", "ន័រវេស", "ដាណឺម៉ាក", "និងអ៊ីស្លង់"]
console.log(countries.split(", ")); //  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"]
```
8. _trim()_: ដក​ដកឃ្លា​នៅ​ខាង​ដើម​ឬ​ចុង​ string ​ចេញ។
```js
let string = " 30 Days Of JavaScript ";
console.log(string);
console.log(string.trim(" "));
let firstName = " Asabeneh ";
console.log(firstName);
console.log(firstName.trim()); // នៅ​តែ​ដក​ដក​ឃ្លា​នៅ​ខាង​ដើម និង​ចុង​ string
```
```sh
30 Days Of JavasCript
30 Days Of JavasCript
Asabeneh
Asabeneh
```
9. _includes()_: វា​យក​ argument substring ហើយ​វា​ពិនិត្យ​មើល​ថា​តើ​មាន argument substring នៅក្នុង​ string ហ្នឹង​ឬ​អត់។ _includes()_ ឲវិញជា boolean។ ប្រសិនបើខ្សែអក្សររងមាននៅក្នុងខ្សែអក្សរ វាឲពិត បើមិនដូច្នេះទេ វាឲមិនពិត។
```js
let string = "30 Days Of JavaScript";
console.log(string.includes("Days")); // true
console.log(string.includes("days")); // false - it is case sensitive!
console.log(string.includes("Script")); // true
console.log(string.includes("script")); // false
console.log(string.includes("java")); // false
console.log(string.includes("Java")); // true
let country = "Finland";
console.log(country.includes("fin")); // false
console.log(country.includes("Fin")); // true
console.log(country.includes("land")); // true
console.log(country.includes("Land")); // false
```
10. _replace()_: យកជាប៉ារ៉ាម៉ែត្រនៃ substring ចាស់ និង substring ថ្មី។
```js
string.replace(oldsubstring, newsubstring);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.replace("JavaScript", "Python")); // 30 Days Of Python
let country = "Finland";
console.log(country.replace("Fin", "Noman")); // Nomanland
```
11. _charAt()_: យក index ហើយវាឲតម្លៃនៅ index នោះ។
```js
string.charAt(index);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.charAt(0)); // 3
let lastIndex = string.length - 1;
console.log(string.charAt(lastIndex)); // t
```
12. _charCodeAt()_: យក index ហើយវាត្រឡប់ char code (លេខ ASCII) នៃតម្លៃនៅ index នោះ។
```js
string.charCodeAt(index);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.charCodeAt(3)); // លេខ ASCII របស់ D គឺ 68
let lastIndex = string.length - 1;
console.log(string.charCodeAt(lastIndex)); // លេខ ASCII របស់ T គឺ 116
```
13. _indexOf()_: យក​ substring ​មួយ ហើយ​ប្រសិនបើ​ substring ​មាន​ក្នុង​ string វា​ឲទីតាំង​ទីមួយ​នៃ​ substring ប្រសិនបើ​មិនមាន វា​នឹង​ឲ -1
```js
string.indexOf(substring);
```
```js
let string = "30 Days Of JavaScript";
console.log(string.indexOf("D")); // 3
console.log(string.indexOf("Days")); // 3
console.log(string.indexOf("days")); // -1
console.log(string.indexOf("a")); // 4
console.log(string.indexOf("JavaScript")); // 11
console.log(string.indexOf("Script")); //15
console.log(string.indexOf("script")); // -1
```
14. _lastIndexOf()_: យក substring ​មួយ ហើយ​ប្រសិនបើ substring ​មាន​ក្នុង​ខ្សែ​អក្សរ វា​ត្រឡប់​ទីតាំង​ចុងក្រោយ​នៃ​ substring ប្រសិនបើ​វា​មិនមាន វា​ឲ​ -1
```js
//syntax
string.lastIndexOf(substring);
```
```js
let string =
"I love JavaScript. If you do not love JavaScript what else can you love.";
console.log(string.lastIndexOf("love")); // 67
console.log(string.lastIndexOf("you")); // 63
console.log(string.lastIndexOf("JavaScript")); // 38
```
15. _concat()_: វាយក substring ជាច្រើន ហើយភ្ជាប់ពួកវា។
```js
string.concat(substring, substring, substring);
```
```js
let string = "30";
console.log(string.concat("Days", "Of", "JavaScript")); // 30DaysOfJavaScript
let country = "Fin";
console.log(country.concat("land")); // Finland
```
16. វា​យក​ substring ​ជា​ argument ហើយ​វា​ពិនិត្យ​មើល​ថាតើ​ string នេះ​ចាប់ផ្តើម​ដោយ​ substring ដែល​បាន​បញ្ជាក់​នោះ​ឬ​អត់។ វាត្រឡប់ boolean (ពិតឬមិនពិត) ។
```js
//syntax
string.startsWith(substring);
```
```js
let string = "Love is the best to in this world";
console.log(string.startsWith("Love")); // true
console.log(string.startsWith("love")); // false
console.log(string.startsWith("world")); // false
let country = "Finland";
console.log(country.startsWith("Fin")); // true
console.log(country.startsWith("fin")); // false
console.log(country.startsWith("land")); // false
```
17. _endsWith_: វា​យក substring ​ជា argument ហើយ​វា​ពិនិត្យ​មើល​ថា​តើ​ string ​បញ្ចប់​ដោយ​ substring ​ដែល​បាន​បញ្ជាក់​នោះ​ឬ​អត់។ វាឲ boolean (ពិតឬមិនពិត) ។
```js
string.endsWith(substring);
```
```js
let string = "Love is the most powerful feeling in the world";
console.log(string.endsWith("world")); // true
console.log(string.endsWith("love")); // false
console.log(string.endsWith("in the world")); // true
let country = "Finland";
console.log(country.endsWith("land")); // true
console.log(country.endsWith("fin")); // false
console.log(country.endsWith("Fin")); // false
```
18. _search_: វា​យក substring ​ជា​ argument ហើយ​វា​ឲ​ index ​នៃតម្លៃដែលត្រូវដំបូង​។ តម្លៃស្វែងរកអាចជា string ឬ regular expression។
```js
string.search(substring);
```
```js
let string =
"I love JavaScript. If you do not love JavaScript what else can you love.";
console.log(string.search("love")); // 2
console.log(string.search(/javascript/gi)); // 7
```
19. _match_:
វាយក substring ឬ regular expression ជា argument ហើយវាឲ array មួយ ប្រសិនបើមានការផ្គូផ្គង ហើយបើមិនមាន វាឲ null។ យើងមកមើលពីរបៀបរបស់ regular expression។ វាចាប់ផ្តើមដោយ/ និងបញ្ចប់ដោយ/
```js
let string = "love";
let patternOne = /love/; // ដោយគ្មាន flag ណាមួយ
let patternTwo = /love/gi; // g-មានន័យថាស្វែងរកក្នុងអត្ថបទទាំងមូល i មានន័យថា case insensitive
```
Syntax សម្រាប់ការផ្គូផ្គង
```js
// syntax
string.match(substring);
```
```js
let string =
"I love JavaScript. If you do not love JavaScript what else can you love.";
console.log(string.match("love"));
```
```sh
["love", index: 2, input: "I love JavaScript. If you do not love JavaScript what else can you love.", groups: undefined]
```
```js
let pattern = /love/gi;
console.log(string.match(pattern)); // ["love", "love", "love"]
```
ឥឡូវ​នេះយើងនឹងទាញយកលេខចេញពីអត្ថបទដោយប្រើ regular expression។ នេះមិនមែនជាផ្នែក regular expression ទេ កុំភ័យ! យើងនឹងបង្ហាញពី​ regular expression នៅពេលក្រោយ។
```js
let txt =
"In 2019, I ran 30 Days of Python. Now, in 2020 I am super exited to start this challenge";
let regEx = /\d+/;
// ជាមួួយ d នេះវាជំនួសឲ digit ជាជាងអក្សរ d
// + មានន័យថាលេខមួយខ្ទង់ ឬច្រើនខ្ទង់
// ប្រសិនបើមាន g បន្ទាប់ពីនោះមានន័យថាជាសកល និងស្វែងរកគ្រប់ទីកន្លែង។
console.log(txt.match(regEx)); // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"]
console.log(txt.match(/\d+/g)); // ["2019", "30", "2020"]
```
20. _repeat()_: វាយកលេខជា argument ហើយវាឲទម្រង់ដដែលៗរបស់ string នោះ។
```js
string.repeat(n);
```
```js
let string = "love";
console.log(string.repeat(10)); // lovelovelovelovelovelovelovelovelovelove
```
## ការពិនិត្យមើលនិងផ្លាស់ប្តូរប្រភេទទិន្នន័យ
### ការពិនិត្យមើលប្រភេទទិន្នន័យ
ដើម្បីពិនិត្យមើលប្រភេទទិន្នន័យនៃ variable ណាមួយ យើងប្រើ method _typeof_ ។
**Example:**
```js
// ប្រភេទទិន្នន័យ javascript ផ្សេងៗគ្នា
// ប្រកាសប្រភេទទិន្នន័យផ្សេងៗគ្នា
let firstName = "Asabeneh"; // string
let lastName = "Yetayeh"; // string
let country = "Finland"; // string
let city = "Helsinki"; // string
let age = 250; // number វាមិនមែនជាអាយុពិតរបស់ខ្ញុំទេ កុំគិតអំពីវា។
let job; // undefined, ដោយសារតែតម្លៃមិនត្រូវបានកំណត់
console.log(typeof "Asabeneh"); // string
console.log(typeof firstName); // string
console.log(typeof 10); // number
console.log(typeof 3.14); // number
console.log(typeof true); // boolean
console.log(typeof false); // boolean
console.log(typeof NaN); // number
console.log(typeof job); // undefined
console.log(typeof undefined); // undefined
console.log(typeof null); // object
```
### ការផ្លាស់ប្តូរប្រភេទទិន្នន័យ (Casting)
- Casting៖ ការបំប្លែងប្រភេទទិន្នន័យមួយទៅប្រភេទទិន្នន័យមួយទៀត។ យើងប្រើ _parseInt()_, _parseFloat()_, _Number()_, _+ sign_, _str()_
នៅពេលយើងធ្វើប្រតិបត្តិការនព្វន្ធលើ string numbers យើងគួរតែបំប្លែងវាជាចំនួនគត់ ឬចំនួនទសភាគ ប្រសិនបើវាមិនបង្កើត error។
#### String ទៅចំនួនគត់
យើងអាចបំប្លែង string number ទៅជាលេខមួយ។ លេខណាមួយនៅក្នុង quote គឺជា string number ឧទាហរណ៍នៃ string number៖ '10', '5' ។ល។
យើង​អាច​បំប្លែង string ទៅ​ជា​លេខ​បាន​ដោយ​ប្រើ​វិធី​ដូច​ខាង​ក្រោម៖
- parseInt()
- Number()
- Plus sign(+)
```js
let num = "10";
let numInt = parseInt(num);
console.log(numInt); // 10
```
```js
let num = "10";
let numInt = Number(num);
console.log(numInt); // 10
```
```js
let num = "10";
let numInt = +num;
console.log(numInt); // 10
```
#### String ទៅចំនួនទសភាគ
យើងអាចបំប្លែង string float ទៅជាចំនួនទសភាគ។ ចំនួនទសភាគណាមួយនៅក្នុង quote គឺជា string float ឧទាហរណ៍នៃ string float៖ '9.81', '3.14', '1.44' ។ល។
យើងអាចបំប្លែង string float ទៅជាលេខបានដោយប្រើវិធីខាងក្រោម៖
- parseFloat()
- Number()
- Plus sign(+)
```js
let num = "9.81";
let numFloat = parseFloat(num);
console.log(numFloat); // 9.81
```
```js
let num = "9.81";
let numFloat = Number(num);
console.log(numFloat); // 9.81
```
```js
let num = "9.81";
let numFloat = +num;
console.log(numFloat); // 9.81
```
#### ចំនួនទសភាគទៅចំនួនគត់
យើងអាចបំប្លែងលេខទសភាគទៅជាចំនួនគត់។
យើងប្រើវិធីខាងក្រោមដើម្បីបំប្លែងចំនួនទសភាគទៅជាចំនួនគត់៖
- parseInt()
```js
let num = 9.81;
let numInt = parseInt(num);
console.log(numInt); // 9
```
🌕 អ្នកពិតជាអស្ចារ្យមែន។ អ្នកទើបតែបានបញ្ចប់ challenge នេះនៅថ្ងៃទី 2 ហើយអ្នកកំពុងឈានទៅមុខពីរជំហានក្នុងដំណើរឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់សម្រាប់ថ្ងៃទីពីរ
### លំហាត់៖ កម្រិត ១
1. ប្រកាស variable ដែលមានឈ្មោះ challenge ហើយកំណត់វាទៅជាតម្លៃ **'30 Days Of JavaScript'**។
2. បង្ហាញ string នៅលើ browser console ដោយប្រើ **console.log()**
3. បង្ហាញ **ប្រវែង** នៃ string នៅលើ browser console ដោយប្រើ _console.log()_
4. ផ្លាស់ប្តូរតួអក្សរ string ទាំងអស់ទៅជាអក្សរធំដោយប្រើវិធី **toUpperCase()**
5. ផ្លាស់ប្តូរតួអក្សរ string ទាំងអស់ទៅជាអក្សរតូចដោយប្រើវិធីសាស្រ្ត **toLowerCase()**
6. កាត់ (slice) ចេញពាក្យដំបូងនៃខ្សែអក្សរដោយប្រើ **substr()** ឬ **substring()** method
7. កាត់ឃ្លាថា Days_Of_JavaScript ចេញពី 30 Days Of JavaScript ។
8. ពិនិត្យមើលថាតើ string មានពាក្យ **script** ដោយប្រើ **includes()** method
9. បំបែក string ទៅជា array ដោយប្រើវិធីសាស្ត្រ split()
10. បំបែក string 30 Days Of JavaScript នៅចន្លោះដោយប្រើវិធីសាស្ត្រ **split()**
11. 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' **split** string ហ្នឹងនៅសញ្ញាក្បៀស ហើយប្តូរវាទៅជា array
12. ផ្លាស់ប្តូរ 30 Days Of JavaScript ទៅ 30 Days of Python ដោយប្រើវិធីសាស្រ្ត **replace()** ។
13. តើអ្វីជាតួអក្សរនៅ index 15 ក្នុងខ្សែអក្សរ '30 Days Of JavaScript'? ប្រើវិធីសាស្រ្ត **charAt()**។
14. តើអ្វីទៅជាកូដតួអក្សររបស់ J ក្នុងខ្សែអក្សរ '30 Days Of JavaScript' ដោយប្រើ **charCodeAt()**
15. ប្រើ **indexOf** ដើម្បីកំណត់ទីតាំងនៃការលេចឡើងដំបូងនៃ **a** ក្នុង 30 Days Of JavaScript
16. ប្រើ **lastIndexOf** ដើម្បីកំណត់ទីតាំងនៃលេខឡើងចុងក្រោយនៃ **a** ក្នុង 30 Days Of JavaScript ។
17. ប្រើ **indexOf** ដើម្បីស្វែងរកទីតាំងនៃការកើតឡើងដំបូងនៃពាក្យ **because** ក្នុងប្រយោគខាងក្រោម៖**'You cannot end a sentence with because because because is a conjunction'**
18. ប្រើ **lastIndexOf** ដើម្បីស្វែងរកទីតាំងនៃការកើតឡើងចុងក្រោយនៃពាក្យ **because** ក្នុងប្រយោគខាងក្រោម៖**'You cannot end a sentence with because because because is a conjunction'**
19. ប្រើ **search** ដើម្បីស្វែងរកទីតាំងនៃការកើតឡើងដំបូងនៃពាក្យ **because** នៅក្នុងប្រយោគខាងក្រោម:**'You cannot end a sentence with because because because is a conjunction'**
20. ប្រើ **trim()** ដើម្បីលុបដកឃ្លាណាមួយនៅខាងដើម និងចុងបញ្ចប់នៃ string។ ឧទាហរណ៍ ' 30 Days Of JavaScript '។
21. ប្រើវិធីសាស្រ្ត **startsWith()** ជាមួយ string _30 Days Of JavaScript_ ហើយធ្វើឱ្យលទ្ធផលពិត
22. ប្រើវិធីសាស្រ្ត **endsWith()** ជាមួយ string _30 Days Of JavaScript_ ហើយធ្វើឱ្យលទ្ធផលពិត
23. ប្រើវិធីសាស្រ្ត **match()** ដើម្បីស្វែងរក **a** ទាំងអស់ក្នុង 30 Days Of JavaScript
24. ប្រើ **concat()** ដើម្បីបញ្ចូល '30 Days of' និង 'JavaScript' ទៅ string តែមួយ '30 Days Of JavaScript'
25. ប្រើវិធីសាស្រ្ត **repeat()** ដើម្បបង្ហាញ 30 Days Of JavaScript 2 ដង
### លំហាត់៖ កម្រិត ២
1. ដោយប្រើ console.log() បង្ហាញសេចក្តីថ្លែងខាងក្រោម៖
```sh
The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another.
```
2. ដោយប្រើ console.log() បង្ហាញសម្រង់ខាងក្រោមដោយ Mother Teresa:
```sh
"Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead."
```
3. ពិនិត្យមើលថា typeof នៃ '10' គឺពិតជាស្មើនឹង 10។ ប្រសិនបើមិនធ្វើឱ្យវាស្មើគ្នាពិតប្រាកដ។
4. ពិនិត្យមើលថាតើ parseFloat('9.8') ស្មើនឹង 10 ប្រសិនបើមិនធ្វើឱ្យវាពិតជាស្មើនឹង 10 ។
5. ពិនិត្យមើលថាតើ 'on' ត្រូវបានរកឃើញនៅក្នុង python និង jargon ដែរឬទេ
6. _I hope this course is not full of jargon_. ពិនិត្យមើលថាតើ _jargon_ ស្ថិតនៅក្នុងប្រយោគដែររឺទេ
7. បង្កើតចំនួនចៃដន្យពី 0 ដល់ 100។
8. បង្កើតលេខចៃដន្យរពី 50 ដល់ 100 រួមបញ្ចូល។
8. បង្កើតលេខចៃដន្យរពី 0 ដល់ 255 រួមបញ្ចូល។
10. ចូលតួអក្សរ string 'JavaScript' ដោយប្រើលេខចៃដន្យ។
11. ប្រើ console.log() ហើយ escape character ដើម្បីបោះពុម្ពលំនាំខាងក្រោម។
```js
1 1 1 1 1
2 1 2 4 8
3 1 3 9 27
4 1 4 16 64
5 1 5 25 125
```
12. ប្រើ **substr** ដើម្បីកាត់ឃ្លា **because because because** ចេញពីប្រយោគខាងក្រោម៖**'You cannot end a sentence with because because because is a conjunction'**
### លំហាត់៖ កម្រិត ៣
1. 'Love is the best thing in this world. Some found their love and some are still looking for their love.' រាប់ចំនួនពាក្យ **love** ក្នុងប្រយោគនេះ។
2. ប្រើ **match()** ដើម្បីរាប់ចំនួន **because** ទាំងអស់ក្នុងប្រយោគខាងក្រោម:**'You cannot end a sentence with because because because is a conjunction'**
3. សម្អាតអត្ថបទខាងក្រោម ហើយស្វែងរកពាក្យញឹកញាប់បំផុត (ប្រើ replace និង regular expression)។
```js
const sentence =
"%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching";
```
4. គណនាប្រាក់ចំណូលប្រចាំឆ្នាំសរុបរបស់បុគ្គលដោយស្រង់លេខចេញពីអត្ថបទខាងក្រោម។ 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.'
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 1](../readMe.md) | [ថ្ងៃទី 3 >>](../03_Day_Booleans_operators_date/03_booleans_operators_date.md)

637
Khmer/03_Day_Booleans_operators_date/03_booleans_operators_date.md
Unescape View File

@ -0,0 +1,637 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: Booleans, ប្រតិបត្តិករ, Date</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 2](../02_Day_Data_types/02_day_data_types.md) | [ថ្ងៃទី 4 >>](../04_Day_Conditionals/04_day_conditionals.md)
![សាមសិបថ្ងៃនៃ JavaScript](../images/banners/day_1_3.png)
- [📔 ថ្ងៃទី 3](#-day-3)
- [Booleans](#booleans)
- [តម្លៃពិត](#truthy-values)
- [តម្លៃមិនពិត](#falsy-values)
- [Undefined](#undefined)
- [Null](#null)
- [ប្រតិបត្តិករ](#operators)
- [ប្រតិបត្តិករ Assignment](#assignment-operators)
- [ប្រតិបត្តិករ Arithmetic](#arithmetic-operators)
- [ប្រតិបត្តិករ Comparison](#comparison-operators)
- [ប្រតិបត្តិករ Logical](#logical-operators)
- [ប្រតិបត្តិករ Increment](#increment-operator)
- [ប្រតិបត្តិករ Decrement](#decrement-operator)
- [ប្រតិបត្តិករ Ternary](#ternary-operators)
- [អាទិភាពប្រតិបត្តិករ](#operator-precedence)
- [Window Methods](#window-methods)
- [Window alert() method](#window-alert-method)
- [Window prompt() method](#window-prompt-method)
- [Window confirm() method](#window-confirm-method)
- [Date Object](#date-object)
- [ការបង្កើត object ពេលវេលា](#creating-a-time-object)
- [ទាញយកឆ្នាំ](#getting-full-year)
- [ទាញយកខែ](#getting-month)
- [ទាញយកកាលបរិច្ឆេទ](#getting-date)
- [ទាញយកថ្ងៃ](#getting-day)
- [ទាញយកម៉ោង](#getting-hours)
- [ទាញយកនាទី](#getting-minutes)
- [ទាញយកវិនាទី](#getting-seconds)
- [ទាញយក​ពេល](#getting-time)
- [💻 លំហាត់សម្រាប់ថ្ងៃទី ៣](#-day-3-exercises)
- [លំហាត់៖ កម្រិត ១](#exercises-level-1)
- [លំហាត់៖ កម្រិត ២](#exercises-level-2)
- [លំហាត់៖ កម្រិត ៣](#exercises-level-3)
# 📔 ថ្ងៃទី 3
## Booleans
ប្រភេទទិន្នន័យ Boolean តំណាងឱ្យតម្លៃមួយក្នុងចំណោមតម្លៃទាំងពីរ៖ _true_ ឬ _false_ ។ តម្លៃ Boolean គឺពិតឬមិនពិត។ ការប្រើប្រាស់ប្រភេទទិន្នន័យទាំងនេះនឹងច្បាស់នៅពេលអ្នកចាប់ផ្តើមប្រតិបត្តិករប្រៀបធៀប។ ការប្រៀបធៀបណាមួយនឹងតឲតម្លៃ boolean ដែលពិតឬមិនពិត។
**ឧទាហរណ៍៖ តម្លៃ Boolean**
```js
let isLightOn = true
let isRaining = false
let isHungry = false
let isMarried = true
let truValue = 4 > 3 // ពិត
let falseValue = 4 < 3 // មិនពិត
```
យើងបានយល់ព្រមថាតម្លៃ boolean គឺពិតឬមិនពិត។
### តម្លៃពិត
- លេខទាំងអស់ (វិជ្ជមាន និងអវិជ្ជមាន) គឺជាតម្លៃពិត លើកលែងតែលេខសូន្យ
- string ទាំងអស់គឺជាការពិត លើកលែងតែ string ទទេ ('')
- boolean true
### តម្លៃមិនពិត
- 0
- 0n
- null
- undefined
- NaN
- boolean false
- '', "", ``, string ទទេ
វាជាការល្អក្នុងការចងចាំតម្លៃពិត និងតម្លៃមិនពិតទាំងនោះ។ នៅក្នុងផ្នែកបន្ទាប់ យើងនឹងប្រើប្រាស់ពួកវាជាមួយនិង conditional ដើម្បីធ្វើការសម្រេចចិត្ត។
## Undefined
ប្រសិនបើយើងប្រកាស variable ហើយយើងមិនកំណត់តម្លៃទេ តម្លៃនឹង undefined។ បន្ថែមពីលើនេះ ប្រសិនបើ function មិនឲតម្លៃទេ វានឹងឲ undefined។
```js
let firstName
console.log(firstName) // undefined ព្រោះ​វា​មិន​ទាន់បាន​កំណត់​តម្លៃ​នៅ​ឡើយ​ទេ។
```
## Null
```js
let empty = null
console.log(empty) // -> null , មានន័យថាគ្មានតម្លៃ
```
## Operators
### ប្រតិបត្តិករ Assignment
សញ្ញាស្មើគ្នានៅក្នុង JavaScript គឺជាប្រតិបត្តិករ assignment។ វាប្រើដើម្បីកំណត់ variable។
```js
let firstName = 'Asabeneh'
let country = 'Finland'
```
ប្រតិបត្តិករ Assignment
![Assignment operators](../images/assignment_operators.png)
### ប្រតិបត្តិករ Arithmetic
ប្រតិបត្តិករ Arithmetic គឺជា ប្រមាណវិធីគណិតវិទ្យា។
- ផលបូក(+): a + b
- ផលដក(-): a - b
- ផលគុណ(*): a * b
- ផលចែក(/): a / b
- ម៉ូឌុល(%): a % b
- ស្វ័យគុណ(**): a ** b
```js
let numOne = 4
let numTwo = 3
let sum = numOne + numTwo
let diff = numOne - numTwo
let mult = numOne * numTwo
let div = numOne / numTwo
let remainder = numOne % numTwo
let powerOf = numOne ** numTwo
console.log(sum, diff, mult, div, remainder, powerOf) // 7,1,12,1.33,1, 64
```
```js
const PI = 3.14
let radius = 100 // ប្រវែងគិតជាម៉ែត្រ
// គណនាផ្ទៃនៃរង្វង់មួយ
const areaOfCircle = PI * radius * radius
console.log(areaOfCircle) // 314 m
const gravity = 9.81 // គិតជា m/s2
let mass = 72 // គិតជាគីឡូក្រាម
// គណនាទម្ងន់របស់វត្ថុមួយ។
const weight = mass * gravity
console.log(weight) // 706.32 N(Newton)
const boilingPoint = 100 // សីតុណ្ហភាពក្នុង oC, ចំណុចរំពុះនៃទឹក
const bodyTemp = 37 // សីតុណ្ហភាពរាងកាយក្នុង oC
// ការភ្ជាប់ string ជាមួយលេខដោយប្រើ string interpolation
/*
The boiling point of water is 100 oC.
Human body temperature is 37 oC.
The gravity of earth is 9.81 m/s2.
*/
console.log(
`The boiling point of water is ${boilingPoint} oC.\nHuman body temperature is ${bodyTemp} oC.\nThe gravity of earth is ${gravity} m / s2.`
)
```
### ប្រតិបត្តិករ Comparison
ក្នុង​ការ​សរសេរ​កម្មវិធី យើង​ប្រើ​ប្រតិបត្តិករ​ comparison ដើម្បី​ប្រៀបធៀប​តម្លៃ​ពីរ។ យើងពិនិត្យមើលថាតើតម្លៃមួយធំជាង ឬតិចជាង ឬស្មើនឹងតម្លៃផ្សេងទៀត។
![Comparison Operators](../images/comparison_operators.png)
**Example: Comparison Operators**
```js
console.log(3 > 2) // ពិតព្រោះ 3 ធំជាង 2
console.log(3 >= 2) // ពិតព្រោះ 3 ធំជាង 2
console.log(3 < 2) // មិនពិត ពីព្រោះ 3 ធំជាង 2
console.log(2 < 3) // ពិតព្រោះ 2 តិចជាង 3
console.log(2 <= 3) // ពិតព្រោះ 2 តិចជាង 3
console.log(3 == 2) // មិនពិត ព្រោះ ៣ មិនស្មើនឹង ២
console.log(3 != 2) // ពិតព្រោះ ៣ មិនស្មើនឹង ២
console.log(3 == '3') // ពិត ប្រៀបធៀបតម្លៃប៉ុណ្ណោះ។
console.log(3 === '3') // មិនពិត ប្រៀបធៀបតម្លៃ និងប្រភេទទិន្នន័យ
console.log(3 !== '3') // ពិត ប្រៀបធៀបតម្លៃ និងប្រភេទទិន្នន័យ
console.log(3 != 3) // មិនពិត ប្រៀបធៀបតម្លៃប៉ុណ្ណោះ។
console.log(3 !== 3) // មិនពិត ប្រៀបធៀបតម្លៃ និងប្រភេទទិន្នន័យ
console.log(0 == false) // ពិត, សមមូល
console.log(0 === false) // មិនពិត មិនដូចគ្នាទេ។
console.log(0 == '') // ពិត, សមមូល
console.log(0 == ' ') // ពិត, សមមូល
console.log(0 === '') // មិនពិត មិនដូចគ្នាទេ។
console.log(1 == true) // ពិត, សមមូល
console.log(1 === true) // មិនពិត មិនដូចគ្នាទេ។
console.log(undefined == null) // ពិត
console.log(undefined === null) // មិនពិត
console.log(NaN == NaN) // មិនពិត, មិនស្មើគ្នាទេ
console.log(NaN === NaN) // មិនពិត
console.log(typeof NaN) // ចំនួន
console.log('mango'.length == 'avocado'.length) // មិនពិត
console.log('mango'.length != 'avocado'.length) // ពិត
console.log('mango'.length < 'avocado'.length) // ពិត
console.log('milk'.length == 'meat'.length) // ពិត
console.log('milk'.length != 'meat'.length) // មិនពិត
console.log('tomato'.length == 'potato'.length) // ពិត
console.log('python'.length > 'dragon'.length) // មិនពិត
```
ព្យាយាមយល់ពីការប្រៀបធៀបខាងលើជាមួយនឹងតក្កវិជ្ជាមួយចំនួន។ ការចងចាំដោយគ្មានតក្កវិជ្ជាអាចពិបាក។
JavaScript គឺជាប្រភេទភាសាសរសេរកម្មវិធីដែលចងគ្នា។ កូដ JavaScript ដំណើរការ និងផ្តល់ឱ្យអ្នកនូវលទ្ធផល ប៉ុន្តែលុះត្រាតែអ្នកពូកែវាប្រហែលជាមិនមែនជាលទ្ធផលដែលចង់បាននោះទេ។
តាមក្បួន ប្រសិនបើតម្លៃមិនពិតជាមួយ == វានឹងមិនស្មើនឹង === ។ ការប្រើប្រាស់ === មានសុវត្ថិភាពជាងការប្រើប្រាស់ == ។ [លំនាំ​](https://dorey.github.io/JavaScript-Equality-Table/) មានបញ្ជីពេញលេញនៃការប្រៀបធៀបប្រភេទទិន្នន័យ
### ប្រតិបត្តិករ Logical
និមិត្តសញ្ញាខាងក្រោមគឺជាសញ្ញាប្រមាណវិធីតក្កវិជ្ជាទូទៅ៖
&&(ampersand), ||(pipe) និង !(negation)។
ប្រតិបត្តិករ && ទទួលបានពិត លុះត្រាតែប្រតិបត្តិករទាំងពីរពិត។
នេះ || ប្រតិបត្តិករទទួលបានពិត នៅពេលប្រតិបត្តិករមួយពិតរឺទាំងពីរ។
នេះ! ប្រតិបត្តិករបដិសេធការពិតទៅមិនពិត និងមិនពិតទៅពិត។
```js
// ឧទាហរណ៍ ប្រតិបត្តិករ ampersand &&
const check = 4 > 3 && 10 > 5 // ពិត && ពិត -> ពិត
const check = 4 > 3 && 10 < 5 // ពិត && មិនពិត -> មិនពិត
const check = 4 < 3 && 10 < 5 // មិនពិត && មិនពិត -> មិនពិត
// ឧទាហរណ៍នៃប្រតិបត្តិការ || pipe or
const check = 4 > 3 || 10 > 5 // ពិត || ពិត -> ពិត
const check = 4 > 3 || 10 < 5 // ពិត || មិនពិត -> ពិត
const check = 4 < 3 || 10 < 5 // មិនពិត || false -> មិនពិត
// ឧទាហរណ៍ ! Negation
let check = 4 > 3 // ពិត
let check = !(4 > 3) // មិនពិត
let isLightOn = true
let isLightOff = !isLightOn // មិនពិត
let isMarried = !false // ពិត
```
### ប្រតិបត្តិករ Increment
នៅក្នុង JavaScript យើងប្រើ increment operator ដើម្បីបង្កើនតម្លៃដែលរក្សាទុកក្នុង variable។ ការកើនឡើងអាចជា pre-increment រឺក៏ post-increment។ តោះមើលពួកគេមួយៗ៖
1. Pre-increment
```js
let count = 0
console.log(++count) // 1
console.log(count) // 1
```
1. Post-increment
```js
let count = 0
console.log(count++) // 0
console.log(count) // 1
```
យើងប្រើភាគច្រើនគឺ post-increment។ យ៉ាងហោចណាស់ អ្នកគួរចងចាំពីរបៀបប្រើ ប្រតិបត្តិករ post-increment
### ប្រតិបត្តិករ Decrement
នៅក្នុង JavaScript យើងប្រើ decrement operator ដើម្បីបន្ថយតម្លៃដែលរក្សាទុកក្នុងអថេរ។ ការថយចុះអាចជា pre-decrement រឺ post-decrement។ តោះមើលពួកវាមួយៗ៖
1. Pre-decrement
```js
let count = 0
console.log(--count) // -1
console.log(count) // -1
```
2. Post-decrement
```js
let count = 0
console.log(count--) // 0
console.log(count) // -1
```
### ប្រតិបត្តិករ Ternary
ប្រតិបត្តិករ Ternary អនុញ្ញាតឱ្យយើងសរសេរលក្ខខណ្ឌ។
វិធីមួយទៀតដើម្បីសរសេរលក្ខខណ្ឌគឺប្រើ ternary operators ។ សូមមើលឧទាហរណ៍ខាងក្រោម៖
```js
let isRaining = true
isRaining
? console.log('You need a rain coat.')
: console.log('No need for a rain coat.')
isRaining = false
isRaining
? console.log('You need a rain coat.')
: console.log('No need for a rain coat.')
```
```sh
You need a rain coat.
No need for a rain coat.
```
```js
let number = 5
number > 0
? console.log(`${number} is a positive number`)
: console.log(`${number} is a negative number`)
number = -5
number > 0
? console.log(`${number} is a positive number`)
: console.log(`${number} is a negative number`)
```
```sh
5 is a positive number
-5 is a negative number
```
### អាទិភាពប្រតិបត្តិករ
ចង់ណែនាំអ្នកឱ្យអានអំពីអាទិភាពប្រតិបត្តិករពីនេះ។ [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
## Window Methods
### Window alert() method
ដូចដែលអ្នកបានឃើញនៅដើមដំបូង method alert() បង្ហាញប្រអប់ជូនដំណឹងមួយដែលមានសារដែលបានបញ្ជាក់ និងប៊ូតុងយល់ព្រម។ វា​ជា​ method ដែល​មាន​ស្រាប់ ហើយ​វា​យក argument មួយ។
```js
alert(message)
```
```js
alert('Welcome to 30DaysOfJavaScript')
```
កុំប្រើការ alert() ច្រើនពេកព្រោះវានឹងរំខាន ។ សូមប្រើវាដើម្បីតែសាកល្បង។
### Window prompt() method
method prompt បង្ហាញប្រអប់បញ្ចូលជាមួយធាតុបញ្ចូលនៅលើ browser របស់អ្នកដើម្បីយកតម្លៃបញ្ចូល ហើយទិន្នន័យបញ្ចូលអាចត្រូវបានរក្សាទុកក្នុងអថេរមួយ។ វិធីសាស្ត្រ prompt() យក argument ពីរ។ អាគុយម៉ង់ទីពីរគឺស្រេចចិត្ត។
```js
prompt('required text', 'optional text')
```
```js
let number = prompt('Enter number', 'number goes here')
console.log(number)
```
### Window confirm() method
method confirm() បង្ហាញប្រអប់ដែលមានសារដែលបានបញ្ជាក់ រួមជាមួយនឹងប៊ូតុង OK និងប៊ូតុង Cancel ។
ប្រអប់ confirm ត្រូវបានប្រើជាញឹកញាប់ដើម្បីសុំការអនុញ្ញាតពីអ្នកប្រើប្រាស់ដើម្បីប្រតិបត្តិអ្វីមួយ។ Window confirm() យក string ជា argument។
ការ​ចុច OK ផ្តល់​ផល​តម្លៃ​ពិត ចំណែក​ឯ​ការ​ចុច​ប៊ូតុង Cancel ផ្តល់​តម្លៃ​មិន​ពិត។
```js
const agree = confirm('Are you sure you like to delete? ')
console.log(agree) // លទ្ធផលនឹងពិត ឬមិនពិត ដោយផ្អែកលើអ្វីដែលអ្នកចុចលើប្រអប់
```
ទាំង​នេះ​មិន​មែន​ជា window method ​ទាំង​អស់ទេ ​យើង​នឹង​មាន​ផ្នែក​ដាច់​ដោយ​ឡែក​ដើម្បី​ចូល​ជ្រៅ​ទៅ​ក្នុង​ window method​។
## Date Object
ពេលវេលាគឺជារឿងសំខាន់។ យើងចង់ដឹងពីពេលវេលានៃសកម្មភាព ឬព្រឹត្តិការណ៍ជាក់លាក់មួយ។ នៅក្នុង JavaScript បច្ចុប្បន្ន និងកាលបរិច្ឆេទត្រូវបានបង្កើតដោយប្រើ JavaScript Date Object។ object ដែលយើងបង្កើតដោយប្រើ Date object ផ្តល់នូវវិធីសាស្រ្តជាច្រើនដើម្បីធ្វើការជាមួយកាលបរិច្ឆេទ និងពេលវេលា។ វិធីសាស្ត្រដែលយើងប្រើដើម្បីទទួលបានព័ត៌មានកាលបរិច្ឆេទ និងពេលវេលាពីតម្លៃវត្ថុកាលបរិច្ឆេទត្រូវបានចាប់ផ្តើមដោយពាក្យ _get_ ព្រោះវាផ្តល់ព័ត៌មាន។
_getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes, getSeconds(), getMilliseconds(), getTime(), getDay()_
![Date time Object](../images/date_time_object.png)
### ការបង្កើត object ពេលវេលា
នៅពេលយើងបង្កើតobject ពេលវេលាវានឹងផ្តល់ព័ត៌មានអំពីពេលវេលា។ តោះយើងបង្កើត object ពេលវេលា
```js
const now = new Date()
console.log(now) // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time)
```
យើងបានបង្កើត time object ហើយហើយយើងអាចចូលប្រើព័ត៌មានកាលបរិច្ឆេទណាមួយពី object ដោយប្រើ get method ដែលយើងបាននិយាយនៅលើតារាងខាងលើ។
### ទាញយកឆ្នាំ
ចូរស្រង់ចេញ ឬទាញយកឆ្នាំពេញពី object ពេលវេលាមួយ។
```js
const now = new Date()
console.log(now.getFullYear()) // 2020
```
### ទាញយកខែ
ចូរស្រង់ចេញ ឬទាញយកខែពីវត្ថុពេលវេលាមួយ។
```js
const now = new Date()
console.log(now.getMonth()) // 0 ព្រោះ​ខែ​មករា​ ខែ (0-11)
```
### ទាញយកបរិច្ឆេទ
ចូរស្រង់ចេញ ឬទាញយកកាលបរិច្ឆេទនៃខែពី object ពេលវេលាមួយ។
```js
const now = new Date()
console.log(now.getDate()) // ៤ ព្រោះ​ថ្ងៃ​នេះ​ជា​ថ្ងៃ​ទី ៤ គឺ​ថ្ងៃ (១-៣១)
```
### ទាញយកថ្ងៃ
Let's extract or get the day of the week from a time object.
ចូរស្រង់ចេញ ឬទាញយកថ្ងៃនៃសប្តាហ៍ពី object ពេលវេលាមួយ។
```js
const now = new Date()
console.log(now.getDay()) // ៦ ព្រោះ​ថ្ងៃ​សៅរ៍ ជា​ថ្ងៃ​ទី ៧
// ថ្ងៃអាទិត្យគឺ 0 ថ្ងៃច័ន្ទគឺ 1 និងថ្ងៃសៅរ៍គឺ 6
// ទទួលបានថ្ងៃធ្វើការជាលេខ (0-6)
```
### ទាញយកម៉ោង
ចូរស្រង់ចេញ ឬទាញយកម៉ោងពី object ពេលវេលាមួយ។
```js
const now = new Date()
console.log(now.getHours()) // 0 ពីព្រោះពេលវេលាគឺ 00:56:41
```
### ទាញយកនាទី
ចូរស្រង់ចេញ ឬទាញយកនាទីពីវត្ថុពេលវេលាមួយ។
```js
const now = new Date()
console.log(now.getMinutes()) // 56, ដោយសារតែពេលវេលាគឺ 00:56:41
```
### ទាញយកវិនាទី
តោះស្រង់ ឬទាញយកវិនាទីពីវត្ថុពេលវេលា។
```js
const now = new Date()
console.log(now.getSeconds()) // 41, ដោយសារតែពេលវេលាគឺ 00:56:41
```
### ទាញយកពេល
វិធីសាស្រ្តនេះផ្តល់ពេលវេលាគិតជាមិល្លីវិនាទី ដែលចាប់ផ្តើមពីថ្ងៃទី 1 ខែមករា ឆ្នាំ 1970។ វាក៏ត្រូវបានគេស្គាល់ថាជាពេលវេលា Unix ផងដែរ។ យើងអាចទទួលបានពេលវេលា Unix តាមពីរវិធី៖
1. ដោយ _getTime()_
```js
const now = new Date() //
console.log(now.getTime()) // 1578092201341 នេះគឺជាចំនួនវិនាទីដែលបានឆ្លងកាត់ចាប់ពីថ្ងៃទី 1 ខែមករា ឆ្នាំ 1970 ដល់ថ្ងៃទី 4 ខែមករា ឆ្នាំ 2020 00:56:41
```
1. ដោយ _Date.now()_
```js
const allSeconds = Date.now() //
console.log(allSeconds) // 1578092201341 នេះគឺជាចំនួនវិនាទីដែលបានឆ្លងកាត់ចាប់ពីថ្ងៃទី 1 ខែមករា ឆ្នាំ 1970 ដល់ថ្ងៃទី 4 ខែមករា ឆ្នាំ 2020 00:56:41
const timeInSeconds = new Date().getTime()
console.log(allSeconds == timeInSeconds) // ពិត
```
តោះយើងធ្វើទ្រង់ទ្រាយតម្លៃទាំងនេះទៅជាទម្រង់ពេលវេលាដែលអាចអានបាន។
**Example:**
```js
const now = new Date()
const year = now.getFullYear() // ឲឆ្នាំ
const month = now.getMonth() + 1 // ឲខែ (0 - 11)
const date = now.getDate() // ឲកាលបរិច្ឆេទ (1 - 31)
const hours = now.getHours() // ឲលេខ (0 - 23)
const minutes = now.getMinutes() // ឲលេខ (0 -59)
console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56
```
🌕 អ្នកមានថាមពលគ្មានដែនកំណត់។ អ្នកទើបតែបានបញ្ចប់ challenge នៅថ្ងៃទី 3 ហើយអ្នកគឺបានឈានជំហានបីឆ្ពោះទៅរកផ្លូវអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់សម្រាប់ថ្ងៃទី ៣
### លំហាត់៖ កម្រិត ១
1. ប្រកាស firstName, lastName, country, city, age, isMarried, year variable ហើយកំណត់តម្លៃទៅវា ហើយប្រើ typeof ដើម្បីពិនិត្យមើលប្រភេទទិន្នន័យផ្សេងៗគ្នា។
2. ពិនិត្យមើលថាតើប្រភេទនៃ '10' ស្មើនឹង 10 រឺទេ
3. ពិនិត្យមើលថាតើ parseInt ('9.8') ស្មើនឹង 10 រឺទេ
4. តម្លៃ boolean គឺពិតឬមិនពិត.
1. សរសេរ JavaScript ចំនួនបី statement ដែលផ្តល់តម្លៃពិត.
2. សរសេរ JavaScript ចំនួនបី statement ដែលផ្តល់តម្លៃមិនពិត.
5. ស្វែងរកលទ្ធផលនៃកន្សោមប្រៀបធៀបខាងក្រោមជាមុនសិនដោយមិនប្រើ console.log()។ បន្ទាប់ពីអ្នកសម្រេចចិត្តលទ្ធផល បញ្ជាក់វាដោយប្រើ console.log()
1. 4 > 3
2. 4 >= 3
3. 4 < 3
4. 4 <= 3
5. 4 == 4
6. 4 === 4
7. 4 != 4
8. 4 !== 4
9. 4 != '4'
10. 4 == '4'
11. 4 === '4'
12. ស្វែងរកប្រវែងនៃ python និង jargon ហើយបង្កើត statement ប្រៀបធៀបដែលឲតម្លៃមិនពិត។
6. ស្វែងរកលទ្ធផលនៃកន្សោមប្រៀបធៀបខាងក្រោមជាមុនសិនដោយមិនប្រើ console.log()។ បន្ទាប់ពីអ្នកសម្រេចចិត្តលទ្ធផល បញ្ជាក់វាដោយប្រើ console.log()
1. 4 > 3 && 10 < 12
2. 4 > 3 && 10 > 12
3. 4 > 3 || 10 < 12
4. 4 > 3 || 10 > 12
5. !(4 > 3)
6. !(4 < 3)
7. !(false)
8. !(4 > 3 && 10 < 12)
9. !(4 > 3 && 10 > 12)
10. !(4 === '4')
11. There is no 'on' in both dragon and python
7. ប្រើ date object ដើម្បីធ្វើសកម្មភាពដូចខាងក្រោម
1. តើពេលនេះជាឆ្នាំអ្វី?
2. តើពេលនេះជាខែអ្វី?
3. តើ​ថ្ងៃនេះ​ជា​ថ្ងៃ​អ្វី?
4. តើថ្ងៃនេះជាថ្អៃអ្វីហើយជាលេខ?
5. តើម៉ោងប៉ុន្មានឥឡូវនេះ?
6. តើ​មាន​នាទី​អ្វី​ឥឡូវ​នេះ?
7. រកមើលចំនួនវិនាទីដែលបានកន្លងផុតទៅចាប់ពីថ្ងៃទី 1 ខែមករាឆ្នាំ 1970 ដល់ឥឡូវនេះ
### លំហាត់៖ កម្រិត ២
1.សរសេរស្គ្រីបដែលជំរុញឱ្យអ្នកប្រើប្រាស់បញ្ចូលមូលដ្ឋាន និងកម្ពស់នៃត្រីកោណ ហើយគណនាផ្ទៃដីនៃត្រីកោណមួយ (ផ្ទៃ = 0.5 x b x h) ។
```sh
Enter base: 20
Enter height: 10
The area of the triangle is 100
```
1. សរសេរស្គ្រីបដែលជំរុញឱ្យអ្នកប្រើប្រាស់បញ្ចូលចំហៀង a ចំហៀង b និងចំហៀង c នៃត្រីកោណ ហើយនិងគណនាបរិវេណនៃត្រីកោណ (បរិមាត្រ = a + b + c)
```sh
Enter side a: 5
Enter side b: 4
Enter side c: 3
The perimeter of the triangle is 12
```
1. ទទួលបានប្រវែង និងទទឹងដោយប្រើប្រអប់បញ្ចូល ហើយគណនាផ្ទៃដីនៃចតុកោណកែង (ផ្ទៃ = ប្រវែង x ទទឹង និងបរិមាត្រនៃចតុកោណកែង (បរិមាត្រ = 2 x (ប្រវែង + ទទឹង)))
1. ទទួលបានកាំដោយប្រើប្រអប់បញ្ចូល ហើយគណនាផ្ទៃរង្វង់មួយ (ផ្ទៃ = pi x r x r) និងបរិមាត្រនៃរង្វង់មួយ (c = 2 x pi x r) ដែល pi = 3.14 ។
1. គណនាជម្រាល x-intercept និង y-intercept នៃ y = 2x −2
1. ជម្រាលគឺ m = (y<sub>2</sub>-y<sub>1</sub>)/(x<sub>2</sub>-x<sub>1</sub>) ។ ស្វែងរកជម្រាលរវាងចំណុច (2, 2) និងចំណុច (6,10)
1. ប្រៀបធៀបជម្រាលនៃសំណួរទាំងពីរខាងលើ។
1. គណនាតម្លៃ y (y = x<sup>2</sup> + 6x + 9) ។ ព្យាយាមប្រើតម្លៃ x ផ្សេងគ្នា ហើយរកឱ្យឃើញនូវតម្លៃ x ដែល y គឺ 0 ។
1. សរសេរស្គ្រីបដែលជំរុញឱ្យអ្នកប្រើប្រាស់បញ្ចូលម៉ោង និងអត្រាប្រាក់ឈ្នួលក្នុងមួយម៉ោង។ គណនាប្រាក់ឈ្នួលរបស់មនុស្ស?
```sh
Enter hours: 40
Enter rate per hour: 28
Your weekly earning is 1120
```
1. ប្រសិនបើប្រវែងនៃឈ្មោះរបស់អ្នកធំជាង 7 និយាយថាឈ្មោះរបស់អ្នកវែង ផ្សេងទៀតនិយាយថាឈ្មោះរបស់អ្នកខ្លី។
1. ប្រៀបធៀបប្រវែងនាមខ្លួនរបស់អ្នក និងប្រវែងនាមត្រកូលរបស់អ្នក ហើយអ្នកគួរតែទទួលបានលទ្ធផលនេះ។
```js
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
```
```sh
Your first name, Asabeneh is longer than your family name, Yetayeh
```
1. ប្រកាសអថេរពីរ _myAge_ និង _yourAge_ ហើយកំណត់តម្លៃដំបូង
```js
let myAge = 250
let yourAge = 25
```
```sh
I am 225 years older than you.
```
1. ដោយប្រើប្រអប់បញ្ចូល ទាញយកឆ្នាំដែលអ្នកប្រើប្រាស់កើត ហើយប្រសិនបើអ្នកប្រើមានអាយុ 18 ឆ្នាំឡើងទៅ អនុញ្ញាតឲ្យអ្នកប្រើប្រាស់បើកបរ ប្រសិនបើមិនទាន់គ្រប់អាយុទេ ប្រាប់អ្នកប្រើប្រាស់ឱ្យរង់ចាំចំនួនឆ្នាំជាក់លាក់ណាមួយ។
```sh
Enter birth year: 1995
You are 25. You are old enough to drive
Enter birth year: 2005
You are 15. You will be allowed to drive after 3 years.
```
1. សរសេរ​ស្គ្រីប​ដែល​ទាញយក​ឆ្នាំហើយគណនាចំនួននាទីដែលបានរស់នៅ
```sh
Enter number of years you live: 100
You lived 3153600000 seconds.
```
1. បង្កើតទម្រង់ពេលវេលាដែលអាចអានបានរបស់មនុស្សដោយប្រើ date object
1. YYYY-MM-DD HH:mm
2. DD-MM-YYYY HH:mm
3. DD/MM/YYYY HH:mm
### លំហាត់៖ កម្រិត ៣
1. Create a human readable time format using the Date time object. The hour and the minute should be all the time two digits(7 hours should be 07 and 5 minutes should be 05 )
1. បង្កើតទម្រង់ពេលវេលាដែលអាចអានបានរបស់មនុស្សដោយប្រើ date obejct។ ម៉ោង និងនាទីគួរតែជាលេខពីរខ្ទង់ (៧ ម៉ោងគួរតែជា ០៧ និង ៥ នាទីគួរតែជា ០៥)
1. YYY-MM-DD HH:mm eg. 20120-01-02 07:05
[<< ថ្ងៃទី 2](../02_Day_Data_types/02_day_data_types.md) | [ថ្ងៃទី 4 >>](../04_Day_Conditionals/04_day_conditionals.md)

377
Khmer/04_Day_Conditionals/04_day_conditionals.md
Unescape View File

@ -0,0 +1,377 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript៖ Conditionals</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 3](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) | [ថ្ងៃទី 5 >>](../05_Day_Arrays/05_day_arrays.md)
![Thirty Days Of JavaScript](../images/banners/day_1_4.png)
- [📔 ថ្ងៃទី 4](#-day-4)
- [Conditionals](#conditionals)
- [If](#if)
- [If Else](#if-else)
- [If Else if Else](#if--else-if-else)
- [Switch](#switch)
- [Ternary Operators](#ternary-operators)
- [💻 លំហាត់](#-exercises)
- [លំហាត់៖ កម្រិត 1](#exercises-level-1)
- [លំហាត់៖ កម្រិត 2](#exercises-level-2)
- [លំហាត់៖ កម្រិត 3](#exercises-level-3)
# 📔 Day 4
## Conditionals
conditional statement ត្រូវបានប្រើសម្រាប់ធ្វើការសម្រេចចិត្តដោយផ្អែកលើលក្ខខណ្ឌផ្សេងៗ។
តាមលំនាំដើម statement នៅក្នុងស្គ្រីប JavaScript ត្រូវបានប្រតិបត្តិតាមលំដាប់ពីកំពូលទៅបាត។ ប្រសិនបើតក្កវិជ្ជាដំណើរការទាមទារដូច្នេះ លំហូរបន្តបន្ទាប់គ្នានៃការប្រតិបត្តិអាចត្រូវបានផ្លាស់ប្តូរតាមពីរវិធី៖
- conditional execution៖ ប្លុកនៃ statement មួយ ឬច្រើននឹងត្រូវបានប្រតិបត្តិប្រសិនបើកន្សោមជាក់លាក់មួយគឺពិត
- repetitive execution៖ ប្លុកនៃ statement មួយ ឬច្រើននឹងត្រូវបានប្រតិបត្តិដដែលៗ ដរាបណាកន្សោមជាក់លាក់មួយគឺពិត។ នៅក្នុងផ្នែកនេះ យើងនឹងនិយាយអំពី _if_, _else_ , _else if_ statements។ ប្រតិបត្តិករប្រៀបធៀប និង តក្កដែលយើងបានរៀននៅក្នុងផ្នែកមុនៗនឹងមានប្រយោជន៍នៅទីនេះ។
Conditoinals អាចត្រូវបានអនុវត្តដោយប្រើវិធីខាងក្រោម:
- if
- if else
- if else if else
- switch
- ternary operator
### If
នៅក្នុង JavaScript និងភាសាសរសេរកម្មវិធីផ្សេងទៀត ពាក្យគន្លឹះ _if_ ត្រូវបានប្រើដើម្បីពិនិត្យមើលថាតើលក្ខខណ្ឌមួយគឺពិត និងដើម្បីប្រតិបត្តិកូដ។ ដើម្បីបង្កើតលក្ខខណ្ឌ if យើងត្រូវការពាក្យគន្លឹះ _if_ និងលក្ខខណ្ឌនៅខាងក្នុងវង់ក្រចក និងប្លុកកូដនៅខាងក្នុងតង្កៀបអង្កាញ់ ({})។
```js
// syntax
if (condition) {
//ផ្នែកនៃកូដនេះដំណើរការសម្រាប់លក្ខខណ្ឌដែលមានតម្លៃពិត
}
```
**ឧទាហរណ៍:**
```js
let num = 3
if (num > 0) {
console.log(`${num} is a positive number`)
}
// 3 គឺជាលេខវិជ្ជមាន
```
ដូចដែលអ្នកអាចឃើញនៅក្នុងឧទាហរណ៍លក្ខខណ្ឌខាងលើ 3 គឺធំជាង 0 ដូច្នេះវាគឺជាចំនួនវិជ្ជមាន។ លក្ខខណ្ឌគឺពិត ហើយប្លុកកូដត្រូវបានប្រតិបត្តិ។ យ៉ាងណាមិញ ប្រសិនបើលក្ខខណ្ឌមិនពិត យើងនឹងមិនឃើញលទ្ធផលណាមួយឡើយ។
```js
let isRaining = true
if (isRaining) {
console.log('Remember to take your rain coat.')
}
```
ដូចគ្នាទៅនឹងលក្ខខណ្ឌទីពីរ ប្រសិនបើ isRaining មិនពិត នោះ if block នឹងមិនត្រូវបានប្រតិបត្តិ ហើយយើងនឹងមិនឃើញលទ្ធផលណាមួយទេ។ ដើម្បី​មើល​ឃើញ​លទ្ធផល​នៃ​លក្ខខណ្ឌ​មិន​ពិត យើង​គួរ​តែ​មាន​ប្លុក​មួយ​ទៀត​ដែលជា _else_.
### If Else
ប្រសិនបើលក្ខខណ្ឌ if ពិត ប្លុកទីមួយនឹងត្រូវបានប្រតិបត្តិ ប្រសិនបើមិនចឹងទេ លក្ខខណ្ឌ else នឹងត្រូវបានប្រតិបត្តិ។
```js
// syntax
if (condition) {
// ផ្នែកនៃកូដនេះដំណើរការសម្រាប់លក្ខខណ្ឌពិត
} else {
// ផ្នែកនៃកូដនេះដំណើរការសម្រាប់លក្ខខណ្ឌមិនពិត
}
```
```js
let num = 3
if (num > 0) {
console.log(`${num} is a positive number`)
} else {
console.log(`${num} is a negative number`)
}
// 3 is a positive number
num = -3
if (num > 0) {
console.log(`${num} is a positive number`)
} else {
console.log(`${num} is a negative number`)
}
// -3 is a negative number
```
```js
let isRaining = true
if (isRaining) {
console.log('You need a rain coat.')
} else {
console.log('No need for a rain coat.')
}
// You need a rain coat.
isRaining = false
if (isRaining) {
console.log('You need a rain coat.')
} else {
console.log('No need for a rain coat.')
}
// No need for a rain coat.
```
លក្ខខណ្ឌចុងក្រោយគឺមិនពិត ដូច្នេះប្លុក else ត្រូវបានប្រតិបត្តិ។ ចុះបើយើងមានលក្ខខណ្ឌលើសពីពីរ? ក្នុងករណីនោះ យើងនឹងប្រើលក្ខខណ្ឌ *else if*។
### If Else if Else
នៅក្នុងជីវិតប្រចាំថ្ងៃរបស់យើង យើងធ្វើការសម្រេចចិត្តជារៀងរាល់ថ្ងៃ។ យើងធ្វើការសម្រេចចិត្តមិនមែនដោយពិនិត្យមើលលក្ខខណ្ឌមួយ ឬពីរទេ យើងធ្វើការសម្រេចចិត្តដោយផ្អែកលើលក្ខខណ្ឌជាច្រើន។ ដូចទៅនឹងជីវិតប្រចាំថ្ងៃរបស់យើង ការសរសេរកម្មវិធីក៏ពោរពេញទៅដោយលក្ខខណ្ឌផងដែរ។ យើងប្រើ *else if* នៅពេលដែលយើងមានលក្ខខណ្ឌច្រើន។
```js
// syntax
if (condition) {
// code
} else if (condition) {
// code
} else {
// code
}
```
**ឧទាហរណ៍:**
```js
let a = 0
if (a > 0) {
console.log(`${a} is a positive number`)
} else if (a < 0) {
console.log(`${a} is a negative number`)
} else if (a == 0) {
console.log(`${a} is zero`)
} else {
console.log(`${a} is not a number`)
}
```
```js
// if else if else
let weather = 'sunny'
if (weather === 'rainy') {
console.log('You need a rain coat.')
} else if (weather === 'cloudy') {
console.log('It might be cold, you need a jacket.')
} else if (weather === 'sunny') {
console.log('Go out freely.')
} else {
console.log('No need for rain coat.')
}
```
### Switch
Switch គឺជាជម្រើសមួយសម្រាប់ **if else if else**។
switch statement ចាប់ផ្តើមដោយពាក្យគន្លឹះ **switch** បន្តដោយវង់ក្រចក និងប្លុកកូដ។ នៅខាងក្នុងប្លុកកូដយើងនឹងមាន case ផ្សេងគ្នា។ ប្លុកដំណើរការប្រសិនបើតម្លៃនៅក្នុងវង់ក្រចក switch statement ត្រូវគ្នានឹងតម្លៃ case។ break statement គឺដើម្បីបញ្ចប់ការប្រតិបត្តិ ដូច្នេះការប្រតិបត្តិកូដមិនធ្លាក់ចុះបន្ទាប់។ ប្លុក default ដំណើរការប្រសិនបើ case ទាំងអស់មិនបំពេញលក្ខខណ្ឌ។
```js
switch(caseValue){
case 1:
// code
break
case 2:
// code
break
case 3:
// code
break
default:
// code
}
```
```js
let weather = 'cloudy'
switch (weather) {
case 'rainy':
console.log('You need a rain coat.')
break
case 'cloudy':
console.log('It might be cold, you need a jacket.')
break
case 'sunny':
console.log('Go out freely.')
break
default:
console.log(' No need for rain coat.')
}
// ឧទាហរណច្រើនទៀតពី​ switch
let dayUserInput = prompt('What day is today ?')
let day = dayUserInput.toLowerCase()
switch (day) {
case 'monday':
console.log('Today is Monday')
break
case 'tuesday':
console.log('Today is Tuesday')
break
case 'wednesday':
console.log('Today is Wednesday')
break
case 'thursday':
console.log('Today is Thursday')
break
case 'friday':
console.log('Today is Friday')
break
case 'saturday':
console.log('Today is Saturday')
break
case 'sunday':
console.log('Today is Sunday')
break
default:
console.log('It is not a week day.')
}
```
// ឧទាហរណ៍ដើម្បីប្រើ if នៅក្នុង case
```js
let num = prompt('Enter number');
switch (true) {
case num > 0:
console.log('Number is positive');
break;
case num == 0:
console.log('Numbers is zero');
break;
case num < 0:
console.log('Number is negative');
break;
default:
console.log('Entered value was not a number');
}
```
### Ternary Operators
វិធីមួយទៀតដើម្បីសរសេរ conditionals គឺប្រើ ternary operators ។ យើងបានរៀបរាប់រឿងនេះនៅក្នុងផ្នែកផ្សេងទៀត ប៉ុន្តែយើងក៏គួរលើកឡើងវានៅទីនេះផងដែរ។
```js
let isRaining = true
isRaining
? console.log('You need a rain coat.')
: console.log('No need for a rain coat.')
```
🌕 អ្នកពិតជាអស្ចារ្យ ហើយអ្នកមានសក្តានុពលគួរឱ្យកត់សម្គាល់។ អ្នកទើបតែបានបញ្ចប់ challenge ថ្ងៃទី 4 ហើយអ្នកនៅខាងមុខបួនជំហានឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់
### លំហាត់៖ កម្រិត ១
1. ទទួលយកការបញ្ចូលរបស់អ្នកប្រើដោយប្រើប្រអប់បញ្ចូល ("បញ្ចូលអាយុរបស់អ្នក៖")។ ប្រសិនបើអ្នកប្រើមានអាយុ 18 ឆ្នាំ ឬចាស់ជាងនេះ សូមផ្តល់៖ 'អ្នកមានអាយុគ្រប់គ្រាន់ក្នុងការបើកបរ' ប៉ុន្តែប្រសិនបើមិនមែន 18 ឆ្នាំ សូមផ្តល់មតិផ្សេងទៀតដោយបញ្ជាក់ថា រង់ចាំចំនួនឆ្នាំដែលគាត់គ្រប់ 18 ឆ្នាំ។
```sh
Enter your age: 30
You are old enough to drive.
Enter your age:15
You are left with 3 years to drive.
```
1. ប្រៀបធៀបតម្លៃនៃ myAge និង yourAge ដោយប្រើ if … else ។ ផ្អែកលើការប្រៀបធៀប បង្ហាញលទ្ធផលទៅកាន់ console ដែលបញ្ជាក់ថាអ្នកណាចាស់ជាង (ខ្ញុំឬអ្នក)។ ប្រើប្រអប់បញ្ចូល (“បញ្ចូលអាយុរបស់អ្នក៖”) ដើម្បីទទួលបានអាយុ។
```sh
Enter your age: 30
You are 5 years older than me.
```
1. ប្រសិនបើ a ធំជាង b ឲ 'a គឺធំជាង b' បើមិចចឹងទេ 'a គឺតិចជាង b' ។ ព្យាយាមអនុវត្តវាតាមវិធី
- ប្រើ if else
- ternary operator.
```js
let a = 4
let b = 3
```
```sh
4 is greater than 3
```
1. លេខគូគឺចែកដាច់ដោយ 2 ហើយនៅសំណល់សូន្យ។ តើ​អ្នក​ពិនិត្យ​មើល​ដោយ​របៀប​ណាថាលេខ​មួយ​គឺ​គូ ឬ​មិន​គូ ដោយប្រើ JavaScript?
```sh
Enter a number: 2
2 is an even number
Enter a number: 9
9 is is an odd number.
```
### លំហាត់៖ កម្រិត ២
1. សរសេរកូដដែលអាចផ្តល់លំដាប់ពិន្ទុដល់សិស្សតាមពិន្ទុរបស់ពួកគេ៖
- 80-100, A
- 70-89, B
- 60-69, C
- 50-59, D
- 0-49, F
1. ពិនិត្យមើលថាតើរដូវដែលបានបញ្ចូលគឺរដូវស្លឹកឈើជ្រុះ រដូវរងា និទាឃរដូវ ឬរដូវក្តៅ.
ប្រសិនបើអ្នកប្រើប្រាស់បញ្ចូល :
- ខែកញ្ញា តុលា ឬវិច្ឆិកា រដូវគឺរដូវស្លឹកឈើជ្រុះ.
- ខែធ្នូ មករា ឬកុម្ភៈ រដូវគឺរដូវរងា.
- ខែមីនា មេសា ឬឧសភា រដូវគឺនិទាឃរដូវ
- ខែមិថុនា កក្កដា ឬសីហា រដូវគឺរដូវក្តៅ
1. ពិនិត្យមើលថាតើថ្ងៃដែលបានបញ្ចូលជាថ្ងៃចុងសប្តាហ៍ ឬថ្ងៃធ្វើការ។ ស្គ្រីបរបស់អ្នកនឹងយកថ្ងៃជាតម្លៃបញ្ចូល.
```sh
What is the day today? Saturday
Saturday is a weekend.
What is the day today? saturDaY
Saturday is a weekend.
What is the day today? Friday
Friday is a working day.
What is the day today? FrIDAy
Friday is a working day.
```
### លំហាត់៖ កម្រិត ៣
1. សរសេរកម្មវិធីដែលប្រាប់ចំនួនថ្ងៃក្នុងមួយខែ។
```sh
Enter a month: January
January has 31 days.
Enter a month: JANUARY
January has 31 day
Enter a month: February
February has 28 days.
Enter a month: FEbruary
February has 28 days.
```
1. សរសេរកម្មវិធីដែលប្រាប់ចំនួនថ្ងៃក្នុង 1 ខែ ហើយពិចារណាឆ្នាំបង្គ្រប់។
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 3](../03_Day_Booleans_operators_date/03_booleans_operators_date.md) | [ថ្ងៃទី 5 >>](../05_Day_Arrays/05_day_arrays.md)

774
Khmer/05_Day_Arrays/05_day_arrays.md
Unescape View File

@ -0,0 +1,774 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: Arrays</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 4](../04_Day_Conditionals/04_day_conditionals.md) | [ថ្ងៃទី 6 >>](../06_Day_Loops/06_day_loops.md)
![Day 5](../images/banners/day_1_5.png)
- [📔 ថ្ងៃទី 5](#-day-5)
- [Arrays](#arrays)
- [របៀបបង្កើត array ទទេ](#how-to-create-an-empty-array)
- [របៀបបង្កើត array ដែលមានតម្លៃ](#how-to-create-an-array-with-values)
- [ការបង្កើត array ដោយប្រើ split](#creating-an-array-using-split)
- [ការចូលប្រើធាតុ array ដោយប្រើ index](#accessing-array-items-using-index)
- [ការកែប្រែធាតុ array](#modifying-array-element)
- [Methods ដើម្បីកែប្រែ array](#methods-to-manipulate-array)
- [Array Constructor](#array-constructor)
- [ការបង្កើតតម្លៃ static ជាមួយ fill](#creating-static-values-with-fill)
- [ការភ្ជាប់ array ដោយប្រើ concat](#concatenating-array-using-concat)
- [ការទាញយកប្រវែង array](#getting-array-length)
- [ទាញយក index ធាតុនៅក្នុង array](#getting-index-an-element-in-arr-array)
- [ទាញយក index ចុងក្រោយនៃធាតុនៅក្នុង array](#getting-last-index-of-an-element-in-array)
- [ពិនិត្យ array](#checking-array)
- [បំប្លែង array ទៅជា string](#converting-array-to-string)
- [ការភ្ជាប់ធាតុ array](#joining-array-elements)
- [Slice ធាតុ array](#slice-array-elements)
- [Splice method នៅក្នុង array](#splice-method-in-array)
- [បន្ថែមធាតុទៅ array ដោយប្រើ push](#adding-item-to-an-array-using-push)
- [ដកធាតុបញ្ចប់ដោយប្រើ pop](#removing-the-end-element-using-pop)
- [ដកធាតុចេញពីដើម array](#removing-an-element-from-the-beginning)
- [បន្ថែមធាតុពីដើម array](#add-an-element-from-the-beginning)
- [បញ្ច្រាសលំដាប់នៃ array](#reversing-array-order)
- [ការតម្រៀបធាតុនៅក្នុង array](#sorting-elements-in-array)
- [array នៃ array](#array-of-arrays)
- [💻 លំហាត់](#-exercise)
- [លំហាត់៖ កម្រិត 1](#exercise-level-1)
- [លំហាត់៖ កម្រិត 2](#exercise-level-2)
- [លំហាត់៖ កម្រិត 3](#exercise-level-3)
# 📔 ថ្ងៃទី 5
## Arrays
ផ្ទុយទៅនឹងអថេរ array មួយអាចរក្សាទុក តម្លៃច្រើន។ តម្លៃនីមួយៗក្នុង array មាន _index_ ហើយ index នីមួយៗមាន memory address។ តម្លៃនីមួយៗអាចចូលប្រើបានដោយប្រើ _indexes_ របស់ពួកគេ។ index នៃ array មួយចាប់ផ្តើមពី សូន្យហើយ index នៃធាតុចុងក្រោយគឺតិចជាងមួយពីប្រវែងនៃ array
array គឺជាបណ្តុំនៃប្រភេទទិន្នន័យផ្សេងៗគ្នាដែលត្រូវបានដំរៀប និងអាចផ្លាស់ប្តូរបាន (កែប្រែបាន)។ array អនុញ្ញាតឱ្យរក្សាទុកធាតុស្ទួន និងប្រភេទទិន្នន័យផ្សេងៗគ្នា។ array អាចទទេ ឬវាអាចមានតម្លៃប្រភេទទិន្នន័យផ្សេងគ្នា។
### របៀបបង្កើត array ទទេ
នៅក្នុង JavaScript យើងអាចបង្កើត array តាមវិធីផ្សេងៗគ្នា។ យើងនឹងមើលវិធីផ្សេងគ្នាដើម្បីបង្កើត array មួយ។
វាជារឿងធម្មតាណាស់ក្នុងការប្រើ _const_ ជំនួសឱ្យ _let_ ដើម្បីប្រកាសអថេរ array។ ប្រសិនបើអ្នកកំពុងប្រើ const វាមានន័យថាអ្នកមិនប្រើឈ្មោះអថេរនោះម្តងទៀតទេ។
- ដោយ Array constructor
```js
// syntax
const arr = Array()
// or
// let arr = new Array()
console.log(arr) // []
```
- ដោយ square brackets([])
```js
// syntax
// នេះជាវិធីដែលបានណែនាំបំផុតដើម្បីបង្កើត ​array ទទេ
const arr = []
console.log(arr)
```
### របៀបបង្កើត array ដែលមានតម្លៃ
Array ជាមួយតម្លៃដំបូង។ យើងប្រើ _length_ property ដើម្បីស្វែងរកប្រវែងនៃ array មួយ។
```js
const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array នៃលេខ
const fruits = ['banana', 'orange', 'mango', 'lemon'] // array នៃ string, ផ្លែឈើ
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array នៃ string, បន្លៃ
const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // array នៃ string, ផលិតផល
const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // array នៃបច្ចេកវិទ្យា web
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // array នៃ string, ប្រទេស
// បង្ហាញ array និងប្រវែងរបស់វា។
console.log('Numbers:', numbers)
console.log('Number of numbers:', numbers.length)
console.log('Fruits:', fruits)
console.log('Number of fruits:', fruits.length)
console.log('Vegetables:', vegetables)
console.log('Number of vegetables:', vegetables.length)
console.log('Animal products:', animalProducts)
console.log('Number of animal products:', animalProducts.length)
console.log('Web technologies:', webTechs)
console.log('Number of web technologies:', webTechs.length)
console.log('Countries:', countries)
console.log('Number of countries:', countries.length)
```
```sh
Numbers: [0, 3.14, 9.81, 37, 98.6, 100]
Number of numbers: 6
Fruits: ['banana', 'orange', 'mango', 'lemon']
Number of fruits: 4
Vegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']
Number of vegetables: 5
Animal products: ['milk', 'meat', 'butter', 'yoghurt']
Number of animal products: 4
Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB']
Number of web technologies: 7
Countries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway']
Number of countries: 5
```
- array អាចមានធាតុនៃប្រភេទទិន្នន័យផ្សេងៗគ្នា
```js
const arr = [
'Asabeneh',
250,
true,
{ country: 'Finland', city: 'Helsinki' },
{ skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] }
] // arr មានប្រភេទទិន្នន័យផ្សេងៗគ្នា
console.log(arr)
```
### ការបង្កើត array ដោយប្រើ split
ដូចដែលយើងបានឃើញនៅក្នុងផ្នែកមុន យើងអាចបំបែក string នៅទីតាំងផ្សេងគ្នា ហើយយើងអាចប្តូរវាទៅជា array មួយ។ ចូរយើងមើលឧទាហរណ៍ខាងក្រោម។
```js
let js = 'JavaScript'
const charsInJavaScript = js.split('')
console.log(charsInJavaScript) // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
let companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon'
const companies = companiesString.split(',')
console.log(companies) // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"]
let txt =
'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
const words = txt.split(' ')
console.log(words)
// អត្ថបទមានតួអក្សរពិសេស ចូរគិតពីរបៀបដែលអ្នកអាចទទួលបានតែពាក្យ
// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"]
```
### ការចូលប្រើធាតុ array ដោយប្រើ index
យើងចូលប្រើធាតុនីមួយៗក្នុង array ដោយប្រើ index របស់វា។ index របស់ array ចាប់ផ្តើមពី 0។ រូបភាពខាងក្រោមបង្ហាញយ៉ាងច្បាស់អំពី index នៃធាតុនីមួយៗនៅក្នុង array ។
![arr index](../images/array_index.png)
```js
const fruits = ['banana', 'orange', 'mango', 'lemon']
let firstFruit = fruits[0] // យើងកំពុងចូលប្រើធាតុទីមួយដោយប្រើ index របស់វា។
console.log(firstFruit) // banana
secondFruit = fruits[1]
console.log(secondFruit) // orange
let lastFruit = fruits[3]
console.log(lastFruit) // lemon
// index ចុងក្រោយអាចត្រូវបានគណនាដូចខាងក្រោម
let lastIndex = fruits.length - 1
lastFruit = fruits[lastIndex]
console.log(lastFruit) // lemon
```
```js
const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // សំណុំនៃលេខ
console.log(numbers.length) // => ដើម្បីដឹងពីទំហំនៃអារេដែលជា 6
console.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100]
console.log(numbers[0]) // -> 0
console.log(numbers[5]) // -> 100
let lastIndex = numbers.length - 1;
console.log(numbers[lastIndex]) // -> 100
```
```js
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
] // array នៃបច្ចេកវិទ្យាគេហទំព័រ
console.log(webTechs) // ធាតុអារេទាំងអស់។
console.log(webTechs.length) // => ដើម្បីដឹងពីទំហំនៃអារេដែលជា 7
console.log(webTechs[0]) // -> HTML
console.log(webTechs[6]) // -> MongoDB
let lastIndex = webTechs.length - 1
console.log(webTechs[lastIndex]) // -> MongoDB
```
```js
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya'
] // array នៃប្រទេស
console.log(countries) // -> ប្រទេសទាំងអស់នៅក្នុងអារេ
console.log(countries[0]) // -> Albania
console.log(countries[10]) // -> Kenya
let lastIndex = countries.length - 1;
console.log(countries[lastIndex]) // -> Kenya
```
```js
const shoppingCart = [
'Milk',
'Mango',
'Tomato',
'Potato',
'Avocado',
'Meat',
'Eggs',
'Sugar'
] // array នៃផលិតផលអាហារ
console.log(shoppingCart) //
console.log(shoppingCart[0]) // -> Milk
console.log(shoppingCart[7]) // -> Sugar
let lastIndex = shoppingCart.length - 1;
console.log(shoppingCart[lastIndex]) // -> Sugar
```
### ការកែប្រែធាតុ array
អារេអាចផ្លាស់ប្តូរបាន (កែប្រែបាន)។ នៅពេលដែលអារេមួយត្រូវបានបង្កើត យើងអាចកែប្រែតម្លៃនៃធាតុអារេ។
```js
const numbers = [1, 2, 3, 4, 5]
numbers[0] = 10 // ការផ្លាស់ប្តូរ 1 នៅ index 0 ទៅ 10
numbers[1] = 20 // ការផ្លាស់ប្តូរ 2 នៅ index 1 ដល់ 20
console.log(numbers) // [10, 20, 3, 4, 5]
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya'
]
countries[0] = 'Afghanistan' // ជំនួសអាល់បានីដោយអាហ្វហ្គានីស្ថាន
let lastIndex = countries.length - 1
countries[lastIndex] = 'Korea' // ជំនួសប្រទេសកេនយ៉ាដោយកូរ៉េ
console.log(countries)
```
```sh
["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"]
```
### Methods ដើម្បីកែប្រែ array
មាន method ផ្សេងគ្នាដើម្បីកែប្រែអារេមួយ។ ទាំងនេះគឺជា methods ដែលមានមួយចំនួនដើម្បីដោះស្រាយជាមួយអារេ៖_Array, length, concat, indexOf, slice, splice, join, toString, include, lastIndexOf, isArray, fill, push, pop, shift, unshift_
#### Array Constructor
Array:ដើម្បីបង្កើតអារេ.
```js
const arr = Array() // បង្កើតអារេទទេ
console.log(arr)
const eightEmptyValues = Array(8) // វាបង្កើតតម្លៃទទេប្រាំបី
console.log(eightEmptyValues) // [empty x 8]
```
#### ការបង្កើត static values ជាមួយ fill
fill:បំពេញធាតុអារេទាំងអស់ដោយតម្លៃ static
```js
const arr = Array() // បង្កើតអារេទទេ
console.log(arr)
const eightXvalues = Array(8).fill('X') // វាបង្កើតតម្លៃធាតុប្រាំបីដែលបំពេញដោយ 'X'
console.log(eightXvalues) // ['X', 'X','X','X','X','X','X','X']
const eight0values = Array(8).fill(0) // វាបង្កើតតម្លៃធាតុប្រាំបីដែលបំពេញដោយ '0'
console.log(eight0values) // [0, 0, 0, 0, 0, 0, 0, 0]
const four4values = Array(4).fill(4) // វាបង្កើតតម្លៃធាតុ 4 ដែលបំពេញដោយ '4'
console.log(four4values) // [4, 4, 4, 4]
```
#### ការភ្ជាប់ array ដោយប្រើ concat
concat:ដើម្បីភ្ជាប់អារេពីរ។
```js
const firstList = [1, 2, 3]
const secondList = [4, 5, 6]
const thirdList = firstList.concat(secondList)
console.log(thirdList) // [1, 2, 3, 4, 5, 6]
```
```js
const fruits = ['banana', 'orange', 'mango', 'lemon'] // អារេនៃផ្លែឈើ
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // អារេនៃបន្លែ
const fruitsAndVegetables = fruits.concat(vegetables) // ភ្ជាប់អារេទាំងពីរ
console.log(fruitsAndVegetables)
```
```sh
["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"]
```
#### ការទាញយកប្រវែង array
Length:ដើម្បីដឹងពីទំហំនៃអារេ
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.length) // -> 5 គឺជាទំហំនៃអារេ
```
#### ទាញយក index ធាតុនៅក្នុង array
indexOf: ដើម្បីពិនិត្យមើលថាតើធាតុមាននៅក្នុងអារេ។ ប្រសិនបើវាឲ index នោះធាតុនោះមាន តែបើវាឲ index ផ្សេង វាត្រឡប់ -1 ។
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.indexOf(5)) // -> 4
console.log(numbers.indexOf(0)) // -> -1
console.log(numbers.indexOf(1)) // -> 0
console.log(numbers.indexOf(6)) // -> -1
```
ពិនិត្យធាតុមួយប្រសិនបើវាមាននៅក្នុងអារេ។
- ពិនិត្យធាតុនៅក្នុងបញ្ជីមួយ។
```js
// អនុញ្ញាតឱ្យយើងពិនិត្យមើលថាតើចេកមាននៅក្នុងអារេ
const fruits = ['banana', 'orange', 'mango', 'lemon']
let index = fruits.indexOf('banana') // 0
if(index === -1){
console.log('This fruit does not exist in the array')
} else {
console.log('This fruit does exist in the array')
}
// ផ្លែឈើនេះមាននៅក្នុងអារេ
// យើងអាចប្រើ ternary នៅទីនេះផងដែរ។
index === -1 ? console.log('This fruit does not exist in the array'): console.log('This fruit does exist in the array')
// យើងនឹងពិនិត្យមើលថាតើផ្លែបឺរមាននៅក្នុងអារេរឺទេ
let indexOfAvocado = fruits.indexOf('avocado') // ប្រសិនបើធាតុមិនបានរកឃើញ index គឺ -1
if(indexOfAvocado === -1){
console.log('This fruit does not exist in the array')
} else {
console.log('This fruit does exist in the array')
}
// This fruit does not exist in the array
```
#### ទាញយក index ចុងក្រោយនៃធាតុនៅក្នុង array
LastIndexOf៖ វាផ្តល់ទីតាំងនៃធាតុចុងក្រោយក្នុងអារេ។ ប្រសិនបើវាមានវាឲindex បើមិនមានទេវាឲ -1
```js
const numbers = [1, 2, 3, 4, 5, 3, 1, 2]
console.log(numbers.lastIndexOf(2)) // 7
console.log(numbers.lastIndexOf(0)) // -1
console.log(numbers.lastIndexOf(1)) // 6
console.log(numbers.lastIndexOf(4)) // 3
console.log(numbers.lastIndexOf(6)) // -1
```
includes:ដើម្បីពិនិត្យមើលថាតើមានធាតុនៅក្នុងអារេ។ ប្រសិនបើវាមាន វាឲ true ផ្សេងទៀតវាឲ false។
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.includes(5)) // true
console.log(numbers.includes(0)) // false
console.log(numbers.includes(1)) // true
console.log(numbers.includes(6)) // false
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
] // បញ្ជីនៃបច្ចេកវិទ្យាគេហទំព័រ
console.log(webTechs.includes('Node')) // true
console.log(webTechs.includes('C')) // false
```
#### ពិនិត្យ array
Array.isArray:ដើម្បីពិនិត្យមើលថាតើប្រភេទទិន្នន័យគឺជាអារេ
```js
const numbers = [1, 2, 3, 4, 5]
console.log(Array.isArray(numbers)) // true
const number = 100
console.log(Array.isArray(number)) // false
```
#### ការបំប្លែង array ទៅជា string
toString:បំប្លែងអារេទៅជាខ្សែអក្សរ
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.toString()) // 1,2,3,4,5
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
console.log(names.toString()) // Asabeneh,Mathias,Elias,Brook
```
#### ការភ្ជាប់ធាតុអារេ
join: វា​ត្រូវ​បាន​ប្រើ​ដើម្បី​ភ្ជាប់​ធាតុ​នៃ​អារេ​ argument ដែលបានដាក់ក្នុង method នេះ​នឹង​ត្រូវ​បាន​ភ្ជាប់​ក្នុង​អារេ​ ហើយ​ឲជា string។ តាមលំនាំដើម វាភ្ជាប់ជាមួយសញ្ញាក្បៀស ប៉ុន្តែយើងអាចដាក់ parameter ផ្សេងគ្នាដែលអាចត្រូវបានភ្ជាប់រវាងធាតុ។
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.join()) // 1,2,3,4,5
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
console.log(names.join()) // Asabeneh,Mathias,Elias,Brook
console.log(names.join('')) //AsabenehMathiasEliasBrook
console.log(names.join(' ')) //Asabeneh Mathias Elias Brook
console.log(names.join(', ')) //Asabeneh, Mathias, Elias, Brook
console.log(names.join(' # ')) //Asabeneh # Mathias # Elias # Brook
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
] // បញ្ជីនៃបច្ចេកវិទ្យាគេហទំព័រ
console.log(webTechs.join()) // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB"
console.log(webTechs.join(' # ')) // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB"
```
#### Slice ធាតុ array
Slice: ដើម្បីកាត់ធាតុជាច្រើននៅក្នុងជួរ។ វាត្រូវការប៉ារ៉ាម៉ែត្រពីរ: ទីតាំងចាប់ផ្តើមនិងបញ្ចប់។ វាមិនរាប់បញ្ចូលទីតាំងបញ្ចប់នោះទេ។
```js
const numbers = [1,2,3,4,5]
console.log(numbers.slice()) // -> វាចម្លងធាតុទាំងអស់។
console.log(numbers.slice(0)) // -> វាចម្លងធាតុទាំងអស់។
console.log(numbers.slice(0, numbers.length)) //វាចម្លងធាតុទាំងអស់។
console.log(numbers.slice(1,4)) // -> [2,3,4] // វាមិនរាប់បញ្ចូលទីតាំងបញ្ចប់នោះទេ។
```
#### Splice method ក្នុង array
Splice: វាត្រូវការប៉ារ៉ាម៉ែត្របី៖ ទីតាំងចាប់ផ្តើម ចំនួនដងដែលត្រូវដកចេញ និងចំនួនធាតុដែលត្រូវបន្ថែម។
```js
const numbers = [1, 2, 3, 4, 5]
numbers.splice()
console.log(numbers) // -> លុបធាតុទាំងអស់។
```
```js
const numbers = [1, 2, 3, 4, 5]
numbers.splice(0,1)
console.log(numbers) // លុបធាតុទីមួយចេញ
```
```js
const numbers = [1, 2, 3, 4, 5, 6]
numbers.splice(3, 3, 7, 8, 9)
console.log(numbers.splice(3, 3, 7, 8, 9)) // -> [1, 2, 3, 7, 8, 9] //វាដកធាតុបីចេញ ហើយជំនួសធាតុបី
```
#### បន្ថែមធាតុទៅអារេដោយប្រើ push
Push: ការបន្ថែមធាតុនៅចុងបញ្ចប់។ ដើម្បីបន្ថែមធាតុទៅចុងបញ្ចប់នៃអារេដែលមានស្រាប់ យើងប្រើ method push។
```js
// syntax
const arr = ['item1', 'item2','item3']
arr.push('new item')
console.log(arr)
// ['item1', 'item2','item3','new item']
```
```js
const numbers = [1, 2, 3, 4, 5]
numbers.push(6)
console.log(numbers) // -> [1,2,3,4,5,6]
numbers.pop() // -> យកធាតុមួយចេញពីចុង
console.log(numbers) // -> [1,2,3,4,5]
```
```js
let fruits = ['banana', 'orange', 'mango', 'lemon']
fruits.push('apple')
console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple']
fruits.push('lime')
console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime']
```
#### ការដកធាតុចុងដោយប្រើ pop
pop: ការដកធាតុចេញនៅចុង
```js
const numbers = [1, 2, 3, 4, 5]
numbers.pop() // -> យកធាតុមួយចេញពីចុង
console.log(numbers) // -> [1,2,3,4]
```
#### ការដកធាតុចេញពីដើម
shift: ការដកធាតុអារេមួយចេញនៅដើមអារេ។
```js
const numbers = [1, 2, 3, 4, 5]
numbers.shift() // -> យកធាតុមួយចេញពីដើម
console.log(numbers) // -> [2,3,4,5]
```
#### បន្ថែមធាតុពីដើម
unshift: ការបន្ថែមធាតុអារេនៅដើមអារេ។
```js
const numbers = [1, 2, 3, 4, 5]
numbers.unshift(0) // -> បន្ថែមធាតុមួយពីដំបូង
console.log(numbers) // -> [0,1,2,3,4,5]
```
#### បញ្ច្រាសលំដាប់អារេ
reverse: បញ្ច្រាសលំដាប់នៃអារេមួយ។
```js
const numbers = [1, 2, 3, 4, 5]
numbers.reverse() // -> បញ្ច្រាសលំដាប់នៃអារេ
console.log(numbers) // [5, 4, 3, 2, 1]
numbers.reverse()
console.log(numbers) // [1, 2, 3, 4, 5]
```
#### ការតម្រៀបធាតុនៅក្នុងអារេ
sort: រៀបចំធាតុអារេតាមលំដាប់ឡើង។ តម្រៀបយក callback function យើងនឹងឃើញពីរបៀបដែលយើងប្រើការតម្រៀបជាមួយ callback function នៅក្នុងផ្នែកខាងមុខ។
```js
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
]
webTechs.sort()
console.log(webTechs) // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"]
webTechs.reverse() // បន្ទាប់​ពី​តម្រៀប​ហើយ យើង​អាច​បញ្ច្រាស​វា​បាន។
console.log(webTechs) // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"]
```
### Array នៃ arrays
អារេអាចរក្សាទុកប្រភេទទិន្នន័យផ្សេងៗគ្នា រួមទាំងអារេខ្លួនឯងផងដែរ។ ចូរយើងបង្កើតអារេនៃអារេ
```js
const firstNums = [1, 2, 3]
const secondNums = [1, 4, 9]
const arrayOfArray = [[1, 2, 3], [1, 2, 3]]
console.log(arrayOfArray[0]) // [1, 2, 3]
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
const backEnd = ['Node','Express', 'MongoDB']
const fullStack = [frontEnd, backEnd]
console.log(fullStack) // [["HTML", "CSS", "JS", "React", "Redux"], ["Node", "Express", "MongoDB"]]
console.log(fullStack.length) // 2
console.log(fullStack[0]) // ["HTML", "CSS", "JS", "React", "Redux"]
console.log(fullStack[1]) // ["Node", "Express", "MongoDB"]
```
🌕 អ្នក​ឧស្សាហ៍​ព្យាយាម ហើយ​អ្នក​បាន​សម្រេច​បាន​ច្រើន​ហើយ។ អ្នកទើបតែបានបញ្ចប់ challenge ថ្ងៃទី 5 ហើយអ្នកគឺជាជំហាន 5 ឆ្ពោះទៅរកផ្លូវរបស់អ្នកទៅកាន់ភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់
### លំហាត់៖ កម្រិត ១
```js
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya'
]
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
]
```
1. ប្រកាសអារេទទេ
2. ប្រកាសអារេដែលមានធាតុច្រើនជាង 5
3. ស្វែងរកប្រវែងនៃអារេរបស់អ្នក។
4. ទាញយកធាតុទីមួយ ធាតុកណ្តាល និងធាតុចុងក្រោយនៃអារេ
5. ប្រកាសអារេមួយហៅថា _mixedDataTypes_ ហើយដាក់ប្រភេទទិន្នន័យផ្សេងៗគ្នាក្នុងអារេ និងស្វែងរកប្រវែងនៃអារេ។ ទំហំអារេគួរតែធំជាង 5
6. ប្រកាសឈ្មោះអារេក្រុមហ៊ុន និងឲតម្លៃដំបូង Facebook, Google, Microsoft, Apple, IBM, Oracle និង Amazon
7. បង្ហាញដោយប្រើ _console.log()_
8. បង្ហាញចំនួនក្រុមហ៊ុននៅក្នុងអារេ
9. បង្ហាញក្រុមហ៊ុនទីមួយ ក្រុមហ៊ុនកណ្តាល និងក្រុមហ៊ុនចុងក្រោយ
10. បង្ហាញក្រុមហ៊ុននីមួយៗ
11. ប្តូរឈ្មោះក្រុមហ៊ុននីមួយៗទៅជាអក្សរធំម្តងមួយ ហើយបង្ហាញវាចេញ
12. បង្ហាញអារេដូចជាប្រយោគ៖ Facebook, Google, Microsoft, Apple, IBM, Oracle និង Amazon គឺជាក្រុមហ៊ុន IT ធំ។
13. ពិនិត្យមើលថាតើមានក្រុមហ៊ុនជាក់លាក់នៅក្នុងអារេ itCompanies ដែរឬទេ។ ប្រសិនបើវាមាន ឲក្រុមហ៊ុន បើទេ ឲ _Not found_
14. ត្រងចេញក្រុមហ៊ុនដែលមានច្រើនជាងមួយ 'o' ដោយគ្មានវិធីសាស្ត្រតម្រង
15. តម្រៀបអារេដោយប្រើវិធីសាស្ត្រ _sort()_
16. បញ្ច្រាសអារេដោយប្រើវិធីសាស្ត្រ _reverse()_
17. កាត់ក្រុមហ៊ុន 3 ដំបូងចេញពីអារេ
18. កាត់ក្រុមហ៊ុន 3 ចុងក្រោយចេញពីអារេ
19. កាត់ក្រុមហ៊ុន IT កណ្តាល ឬក្រុមហ៊ុនចេញពីអារេ
20. យកក្រុមហ៊ុន IT ដំបូងចេញពីអារេ
21. ដកក្រុមហ៊ុន IT កណ្តាល ឬក្រុមហ៊ុនចេញពីអារេ
22. លុបក្រុមហ៊ុន IT ចុងក្រោយចេញពីអារេ
23. លុបក្រុមហ៊ុន IT ទាំងអស់។
### លំហាត់៖ កម្រិត ២
1. បង្កើតឯកសារ country.js ដាច់ដោយឡែក ហើយរក្សាទុកអារេប្រទេសទៅក្នុងឯកសារនេះ បង្កើតឯកសារដាច់ដោយឡែក web_techs.js និងរក្សាទុកអារេ webTechs ទៅក្នុងឯកសារនេះ។ ចូលប្រើឯកសារទាំងពីរនៅក្នុងឯកសារ main.js
1. ដំបូង​ត្រូវ​ដក​វណ្ណយុត្តិ​ទាំងអស់​ចេញ ហើយ​ប្តូរ​ខ្សែអក្សរ​ទៅជា​អារេ ហើយ​រាប់​ចំនួន​ពាក្យ​ក្នុង​អារេ
```js
let text =
'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
console.log(words)
console.log(words.length)
```
```sh
["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"]
13
```
1. នៅ​ក្នុង​រទេះ​លក់​ទំនិញ​ដូច​ខាង​ក្រោម ចូរបន្ថែម លុប និងកែសម្រួល​ធាតុ
```js
const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']
```
- បន្ថែម 'Meat' នៅដើមរទេះទិញទំនិញរបស់អ្នក ប្រសិនបើវាមិនទាន់ត្រូវបានបន្ថែម
- បន្ថែម Sguar នៅចុងបញ្ចប់នៃរទេះទិញទំនិញរបស់អ្នកប្រសិនបើវាមិនទាន់ត្រូវបានបន្ថែម
- យក 'Honey' ចេញ ប្រសិនបើអ្នកមានប្រតិកម្មនឹងទឹកឃ្មុំ
- កែប្រែ Tea ទៅជា 'Green Tea'
1. នៅក្នុងប្រទេសនានា សូមពិនិត្យមើលថាតើ 'Ethiopia' មាននៅក្នុងអារេប្រសិនបើវាមានបោះពុម្ព 'ETHIOPIA' ។ ប្រសិនបើវាមិនមាន បន្ថែមទៅបញ្ជីប្រទេស។
1. នៅក្នុងអារេ webTechs ពិនិត្យមើលថាតើ Sass មាននៅក្នុងអារេ ហើយប្រសិនបើវាមាន បោះពុម្ព 'Sass is a preprocess CSS'។ ប្រសិនបើវាមិនមានទេ បន្ថែម Sass ទៅអារេ ហើយបោះពុម្ពអារេ។
1. ភ្ជាប់អថេរទាំងពីរខាងក្រោម ហើយរក្សាទុកវាក្នុងអថេរ fullStack ។
```js
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
const backEnd = ['Node','Express', 'MongoDB']
console.log(fullStack)
```
```sh
["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"]
```
### លំហាត់៖ កម្រិត ៣
1. ខាង​ក្រោម​នេះ​គឺ​ជា​អារេ​នៃ​អាយុនៃសិស្ស​ទាំង​១០​
```js
const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]
```
- តម្រៀបអារេ និងស្វែងរកអាយុអប្បបរមា និងអតិបរមា
- ស្វែងរកអាយុមធ្យម (ធាតុកណ្តាលមួយ ឬធាតុកណ្តាលពីរចែកនឹងពីរ)
- ស្វែងរកអាយុជាមធ្យម (ធាតុទាំងអស់បែងចែកដោយចំនួនធាតុ)
- ស្វែងរក range អាយុ (អតិបរមាដកអប្បបរមា)
- ប្រៀបធៀបតម្លៃនៃ (អប្បបរមា - មធ្យម) និង (អតិបរមា - មធ្យម) ប្រើវិធីសាស្ត្រ _abs()_
1. Slice ប្រទេសដប់ដំបូងពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. ស្វែងរកប្រទេសកណ្តាលនៅក្នុង[countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
2. ចែកអារេប្រទេសជាពីរអារេស្មើគ្នាប្រសិនបើវាគូ។ ប្រសិនបើអារេប្រទេសមិនគូ បន្ថែមទៀតសម្រាប់ពាក់កណ្តាលទីមួយ។
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 4](../04_Day_Conditionals/04_day_Conditionals.md) | [ថ្ងៃទី 6 >>](../06_Day_Loops/06_day_loops.md)

484
Khmer/06_Day_Loops/06_day_loops.md
Unescape View File

@ -0,0 +1,484 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: Loops</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 5](../05_Day_Arrays/05_day_arrays.md) | [ថ្ងៃទី 7 >>](../07_Day_Functions/07_day_functions.md)
![ថ្ងៃទី 5](../images/banners/day_1_6.png)
- [📔 ថ្ងៃទី 6](#-day-6)
- [Loops](#loops)
- [for Loop](#for-loop)
- [while loop](#while-loop)
- [do while loop](#do-while-loop)
- [for of loop](#for-of-loop)
- [break](#break)
- [continue](#continue)
- [💻 លំហាត់៖ ថ្ងៃទី ៦](#-exercisesday-6)
- [លំហាត់៖ កម្រិត ១](#exercises-level-1)
- [លំហាត់៖ កម្រិត ២](#exercises-level-2)
- [លំហាត់៖ កម្រិត ៣](#exercises-level-3)
# 📔 ថ្ងៃទី 6
## Loops
សកម្មភាពភាគច្រើនដែលយើងធ្វើក្នុងជីវិតគឺពោរពេញដោយពាក្យដដែលៗ។ ស្រមៃមើលប្រសិនបើខ្ញុំសុំឱ្យអ្នកបោះពុម្ពពី 0 ទៅ 100 ដោយប្រើ console.log() ។ ដើម្បីអនុវត្តកិច្ចការដ៏សាមញ្ញនេះ វាអាចចំណាយពេលអ្នកពី 2 ទៅ 5 នាទី កិច្ចការដែលធុញទ្រាន់ និងដដែលៗអាចត្រូវបានអនុវត្តដោយប្រើ loop។ ប្រសិនបើអ្នកចូលចិត្តមើលវីដេអូ អ្នកអាចពិនិត្យមើល [video tutorials](https://www.youtube.com/channel/UCM4xOopkYiPwJqyKsSqL9mw)
នៅក្នុងភាសាសរសេរកម្មវិធី ដើម្បីអនុវត្តការងារដដែលៗ យើងប្រើប្រភេទ loop ផ្សេងៗគ្នា។ ឧទាហរណ៍ខាងក្រោមគឺជា loop ដែលប្រើជាទូទៅក្នុង JavaScript និងភាសាសរសេរកម្មវិធីផ្សេងទៀត។
### for Loop
```js
// ចនាសម្ព័ន្ធរបស់ For loop
for(initialization, condition, increment/decrement){
// code goes here
}
```
```js
for(let i = 0; i <= 5; i++){
console.log(i)
}
// 0 1 2 3 4 5
```
```js
for(let i = 5; i >= 0; i--){
console.log(i)
}
// 5 4 3 2 1 0
```
```js
for(let i = 0; i <= 5; i++){
console.log(`${i} * ${i} = ${i * i}`)
}
```
```sh
0 * 0 = 0
1 * 1 = 1
2 * 2 = 4
3 * 3 = 9
4 * 4 = 16
5 * 5 = 25
```
```js
const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'Iceland']
const newArr = []
for(let i = 0; i < countries.length; i++){
newArr.push(countries[i].toUpperCase())
}
// ["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"]
```
ការបន្ថែមធាតុទាំងអស់នៅក្នុងអារេ
```js
const numbers = [1, 2, 3, 4, 5]
let sum = 0
for(let i = 0; i < numbers.length; i++){
sum = sum + numbers[i] // អាចកាត់ឲខ្លីបាន, sum += numbers[i]
}
console.log(sum) // 15
```
ការបង្កើតអារេថ្មីដោយផ្អែកលើអារេដែលមានស្រាប់
```js
const numbers = [1, 2, 3, 4, 5]
const newArr = []
let sum = 0
for(let i = 0; i < numbers.length; i++){
newArr.push( numbers[i] ** 2)
}
console.log(newArr) // [1, 4, 9, 16, 25]
```
```js
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
const newArr = []
for(let i = 0; i < countries.length; i++){
newArr.push(countries[i].toUpperCase())
}
console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
```
### while loop
```js
let i = 0
while (i <= 5) {
console.log(i)
i++
}
// 0 1 2 3 4 5
```
### do while loop
```js
let i = 0
do {
console.log(i)
i++
} while (i <= 5)
// 0 1 2 3 4 5
```
### for of loop
យើងប្រើ for of loop សម្រាប់អារេ។ វា​ជា​វិធី​ដ៏​ងាយស្រួល​ក្នុង​ការ​ iterate ​តាមរយៈ​អារេ​មួយ ប្រសិនបើ​យើង​មិន​ចាប់អារម្មណ៍​លើ​ index ​នៃ​ធាតុ​នីមួយៗ​ក្នុង​អារេ។
```js
for (const element of arr) {
// ដាក់កូដទីនេះ
}
```
```js
const numbers = [1, 2, 3, 4, 5]
for (const num of numbers) {
console.log(num)
}
// 1 2 3 4 5
for (const num of numbers) {
console.log(num * num)
}
// 1 4 9 16 25
// ការបន្ថែមលេខទាំងអស់នៅក្នុងអារេ
let sum = 0
for (const num of numbers) {
sum = sum + num
// អាច​ត្រូវ​បាន​កាត់ឲខ្លី​ដូច​នេះ​, sum += num
// បន្ទាប់ពីនេះយើងនឹងប្រើ syntax ខ្លីជាងមុន (+=, -=, *=, /= etc)
}
console.log(sum) // 15
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
]
for (const tech of webTechs) {
console.log(tech.toUpperCase())
}
// HTML CSS JAVASCRIPT REACT NODE MONGODB
for (const tech of webTechs) {
console.log(tech[0]) // យកតែអក្សរទីមួយនៃធាតុនីមួយៗ, H C J R N M
}
```
```js
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
const newArr = []
for(const country of countries){
newArr.push(country.toUpperCase())
}
console.log(newArr) // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
```
### break
Break ត្រូវបានប្រើដើម្បីបញ្ចប់ loop.
```js
for(let i = 0; i <= 5; i++){
if(i == 3){
break
}
console.log(i)
}
// 0 1 2
```
កូដខាងលើនឹងឈប់ ប្រសិនបើ 3 បានរកឃើញនៅក្នុងដំណើរការ iteration។
### continue
យើងប្រើពាក្យគន្លឹះ *continue* ដើម្បីរំលង iteration ណាមួយ។
```js
for(let i = 0; i <= 5; i++){
if(i == 3){
continue
}
console.log(i)
}
// 0 1 2 4 5
```
🌕 អ្នក​ក្លាហាន​ណាស់​អ្នក​បាន​ធ្វើ​វា​ដល់​ពេល​នេះ​។ ឥឡូវនេះ អ្នកទទួលបានថាមពលដើម្បីធ្វើកិច្ចការដដែលៗ និងគួរឱ្យធុញទ្រាន់ដោយស្វ័យប្រវត្តិ។ អ្នកទើបតែបានបញ្ចប់ការប្រកួតថ្ងៃទី 6 ហើយអ្នកគឺជាជំហាន 6 ឆ្ពោះទៅរកផ្លូវរបស់អ្នកទៅកាន់ភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់៖ ថ្ងៃទី ៦
### លំហាត់៖ កម្រិត ១
```js
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya'
]
const webTechs = [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB'
]
const mernStack = ['MongoDB', 'Express', 'React', 'Node']
```
1. iterate ពី 0 ទៅ 10 ដោយប្រើ loop ហើយធ្វើដូចគ្នាដោយប្រើ while និងធ្វើ while loop
2. iterate ពី 10 ទៅ 0 ដោយប្រើ loop ហើយធ្វើដូចគ្នាដោយប្រើ while និងធ្វើ while loop
3. iterate ពី 0 ទៅ n ដោយប្រើ loop
4. សរសេរ loop ដែលបង្កើតលំនាំខាងក្រោមដោយប្រើ console.log():
```js
#
##
###
####
#####
######
#######
```
5. ប្រើ loop ដើម្បីបង្ហាញលំនាំខាងក្រោម:
```sh
0 x 0 = 0
1 x 1 = 1
2 x 2 = 4
3 x 3 = 9
4 x 4 = 16
5 x 5 = 25
6 x 6 = 36
7 x 7 = 49
8 x 8 = 64
9 x 9 = 81
10 x 10 = 100
```
6. ប្រើ loop ដើម្បីបង្ហាញលំនាំខាងក្រោម:
```sh
i i^2 i^3
0 0 0
1 1 1
2 4 8
3 9 27
4 16 64
5 25 125
6 36 216
7 49 343
8 64 512
9 81 729
10 100 1000
```
7. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញតែលេខគូប៉ុណ្ណោះ។
8. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញតែលេខសេសប៉ុណ្ណោះ។
9. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញតែលេខបឋមតែប៉ុណ្ណោះ។
10. ប្រើ for loop ដើម្បី iterate ពី 0 ទៅ 100 ហើយបង្ហាញផលបូកនៃលេខទាំងអស់។
```sh
The sum of all numbers from 0 to 100 is 5050.
```
11. ប្រើ for loop ដើម្បី iterate ពី 0 ដល់ 100 ហើយបោះពុម្ពផលបូកនៃលេខគូទាំងអស់ និងផលបូកនៃលេខសេសទាំងអស់។
```sh
The sum of all evens from 0 to 100 is 2550. And the sum of all odds from 0 to 100 is 2500.
```
12. ប្រើ for loop ដើម្បី iterate ពី 0 ដល់ 100 ហើយបង្ហាញផលបូកនៃលេខគូទាំងអស់ និងផលបូកនៃលេខសេសទាំងអស់។ បង្ហាញផលបូកនៃគូ និងផលបូកនៃសេសជាអារេ
```sh
[2550, 2500]
```
13. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតអារេនៃ 5 លេខចៃដន្យ
14. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតអារេនៃលេខចៃដន្យ 5 ហើយលេខត្រូវតែមានតែមួយគត់
15. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតលេខសម្គាល់ចៃដន្យចំនួនប្រាំមួយ:
```sh
5j2khz
```
### លំហាត់៖ កម្រិត ២
1. បង្កើតស្គ្រីបតូចមួយដែលបង្កើតលេខតួអក្សរចៃដន្យណាមួយ៖
```sh
fe3jo1gl124g
```
```sh
xkqci4utda1lmbelpkm03rba
```
1. សរសេរស្គ្រីបដែលបង្កើតលេខគោលដប់ប្រាំមួយចៃដន្យ។
```sh
'#ee33df'
```
1. សរសេរស្គ្រីបដែលបង្កើតលេខពណ៌ rgb ចៃដន្យ។
```sh
rgb(240,180,80)
```
1. ដោយប្រើអារេប្រទេសខាងលើ បង្កើតអារេថ្មីខាងក្រោម។
```sh
["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]
```
1. ដោយប្រើអារេប្រទេសខាងលើ បង្កើតអារេសម្រាប់ប្រវែងប្រទេស'។
```sh
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
```
1. ប្រើ array ប្រទេសដើម្បីបង្កើតអារេខាងក្រោម៖
```sh
[
['Albania', 'ALB', 7],
['Bolivia', 'BOL', 7],
['Canada', 'CAN', 6],
['Denmark', 'DEN', 7],
['Ethiopia', 'ETH', 8],
['Finland', 'FIN', 7],
['Germany', 'GER', 7],
['Hungary', 'HUN', 7],
['Ireland', 'IRE', 7],
['Iceland', 'ICE', 7],
['Japan', 'JAP', 5],
['Kenya', 'KEN', 5]
]
```
2. នៅក្នុងបណ្តាប្រទេសខាងលើ សូមពិនិត្យមើលថាតើមានប្រទេស ឬប្រទេសដែលមានពាក្យ 'land' ។ ប្រសិនបើមានប្រទេសដែលមាន 'land' សូមបោះពុម្ពវាជាអារេ។ ប្រសិនបើគ្មានប្រទេសណាដែលមានពាក្យ 'land' ទេ បោះពុម្ព 'All these countries are without land'
```sh
['Finland','Ireland', 'Iceland']
```
3. នៅក្នុងអារេប្រទេសខាងលើ សូមពិនិត្យមើលថាតើមានប្រទេស ឬប្រទេសដែលបញ្ចប់ដោយអក្សររង 'ia' ។ ប្រសិនបើមានប្រទេសបញ្ចប់ដោយ បោះពុម្ពវាជាអារេ។ ប្រសិនបើគ្មានប្រទេសដែលមានពាក្យ 'ai' ទេ បោះពុម្ព 'These are countries ends without ia' ។
```sh
['Albania', 'Bolivia','Ethiopia']
```
4. ដោយប្រើអារេប្រទេសខាងលើ ស្វែងរកប្រទេសដែលមានចំនួនតួអក្សរច្រើនបំផុត។
```sh
Ethiopia
```
5. ដោយប្រើអារេប្រទេសខាងលើ ស្វែងរកប្រទេសដែលមានត្រឹមតែ 5 តួអក្សរ។
```sh
['Japan', 'Kenya']
```
6. ស្វែងរកពាក្យវែងបំផុតនៅក្នុងអារេ webTechs
7. ប្រើអារេ webTechs ដើម្បីបង្កើតអារេនៃអារេខាងក្រោម៖
```sh
[["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]]
```
8. កម្មវិធីដែលបានបង្កើតដោយប្រើ MongoDB, Express, React និង Node ត្រូវបានគេហៅថាកម្មវិធីជង់ MERN ។ បង្កើតអក្សរកាត់ MERN ដោយប្រើអារេ mernStack
9. iterate តាមរយៈអារេ ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] ដោយប្រើ for loop ឬ for of loop ហើយបោះពុម្ពចេញ ធាតុ។
10. នេះគឺជាអារេផ្លែឈើ , ['banana', 'orange', 'mango', 'lemon'] បញ្ច្រាសលំដាប់ដោយប្រើ loop និងមិនប្រើ reverse method។
11. បង្ហាញធាតុទាំងអស់នៃអារេដូចបង្ហាញខាងក្រោម។
```js
const fullStack = [
['HTML', 'CSS', 'JS', 'React'],
['Node', 'Express', 'MongoDB']
]
````
```sh
HTML
CSS
JS
REACT
NODE
EXPRESS
MONGODB
```
### លំហាត់៖ កម្រិត ៣
1. ចម្លងអារេប្រទេស (ជៀសវាងការផ្លាស់ប្តូរ)
1. អារេអាចផ្លាស់ប្តូរបាន។ បង្កើតច្បាប់ចម្លងនៃអារេដែលមិនកែប្រែរបស់ដើម។ តម្រៀបអារេដែលបានចម្លង ហើយរក្សាទុកក្នុង sortedCountries
1. តម្រៀបអារេ webTechs និង អារេ mernStack
1. ស្រង់ប្រទេសទាំងអស់មានពាក្យ 'land' ពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ
1. ស្វែងរកប្រទេសដែលមានចំនួនតួអក្សរខ្ពស់បំផុតនៅក្នុង [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. ស្រង់ប្រទេសទាំងអស់មានពាក្យ 'land' ពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ
1. ស្រង់ប្រទេសទាំងអស់ដែលមានតែបួនតួអក្សរពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ
1. ស្រង់ប្រទេសទាំងអស់ដែលមានពាក្យពីរ ឬច្រើនចេញពី [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយបោះពុម្ពវាជាអារេ
1. បញ្ច្រាស [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) ហើយសរសេរជាអក្សរធំរបស់ប្រទេសនីមួយៗ ហើយរក្សាទុកវាជាអារេ
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 5](../05_Day_Arrays/05_day_arrays.md) | [ថ្ងៃទី 7 >>](../07_Day_Functions/07_day_functions.md)

707
Khmer/07_Day_Functions/07_day_functions.md
Unescape View File

@ -0,0 +1,707 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: Functions</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 6](../06_Day_Loops/06_day_loops.md) | [ថ្ងៃទី 8 >>](../08_Day_Objects/08_day_objects.md)
![Thirty Days Of JavaScript](../images/banners/day_1_7.png)
- [📔 Day 7](#-day-7)
- [Functions](#functions)
- [ការប្រកាស Function](#function-declaration)
- [Function ដោយគ្មានប៉ារ៉ាម៉ែត្រនិង return](#function-without-a-parameter-and-return)
- [Function ជាមួយតម្លៃ return](#function-returning-value)
- [Function ជាមួយប៉ារ៉ាម៉ែត្រ](#function-with-a-parameter)
- [Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ](#function-with-two-parameters)
- [Function ជាមួយប៉ារ៉ាម៉ែត្រជាច្រើន។](#function-with-many-parameters)
- [Function ជាមួយនឹងចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់](#function-with-unlimited-number-of-parameters)
- [ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់ក្នុង function ធម្មតា](#unlimited-number-of-parameters-in-regular-function)
- [ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់នៅក្នុង arrow function](#unlimited-number-of-parameters-in-arrow-function)
- [Anonymous Function](#anonymous-function)
- [Expression Function](#expression-function)
- [Self Invoking Functions](#self-invoking-functions)
- [Arrow Function](#arrow-function)
- [Function ជាមួយ default parameters](#function-with-default-parameters)
- [Function declaration និង Arrow function](#function-declaration-versus-arrow-function)
- [💻 លំហាត់](#-exercises)
- [លំហាត់៖ កម្រិត ១](#exercises-level-1)
- [លំហាត់៖ កម្រិត ២](#exercises-level-2)
- [លំហាត់៖ កម្រិត ៣](#exercises-level-3)
# 📔 ថ្ងៃទី 7
## Functions
រហូតមកដល់ពេលនេះ យើងបានឃើញ JavaScript function ជាច្រើន។ នៅក្នុងផ្នែកនេះ យើងនឹងផ្តោតលើ custom function។ តើ function ជាអ្វី? មុន​នឹង​យើង​ចាប់​ផ្ដើម​បង្កើត ​function សូម​យល់​ថា​ function ជា​អ្វី​ ហើយ​ហេតុ​អ្វី​បាន​ជា​យើង​ត្រូវ function?
function គឺជាប្លុកដែលអាចប្រើឡើងវិញបានក្នុងការសរសេរកម្មវិធីដែលត្រូវបានរចនាឡើងដើម្បីអនុវត្តកិច្ចការជាក់លាក់មួយ។
function ​ត្រូវ​បាន​ប្រកាស​ដោយ​ពាក្យ​គន្លឹះ​ function ​ដែល​តាម​ដោយ​ឈ្មោះ​មួយនិង​វង់ក្រចក ()។ វង់ក្រចកអាចយកប៉ារ៉ាម៉ែត្រ។ ប្រសិនបើ function យកប៉ារ៉ាម៉ែត្រវានឹងត្រូវបានហៅថា arugment។ functin ក៏អាចយកប៉ារ៉ាម៉ែត្រលំនាំដើមផងដែរ។ ដើម្បីរក្សាទុកទិន្នន័យទៅមុខងារ មុខងារមួយត្រូវបោះប្រភេទទិន្នន័យជាក់លាក់។ ដើម្បីទទួលបានតម្លៃដែលយើងហៅ ឬហៅ function មួយ។
function ធ្វើឲកូដ៖
- ស្អាត និងងាយស្រួលអាន
- អាចប្រើឡើងវិញបាន
- ងាយស្រួលក្នុងការតេស
function មួយអាចត្រូវបានប្រកាស ឬបង្កើតតាមវិធីដូចខាងក្រោម:
- _Declaration function_
- _Expression function_
- _Anonymous function_
- _Arrow function_
### ការប្រកាស Function
តោះមើលរបៀបប្រកាស function និងរបៀបហៅ function។
```js
//ប្រកាស function ដោយគ្មានប៉ារ៉ាម៉ែត្រ
function functionName() {
// code goes here
}
functionName() // function ហៅតាមឈ្មោះរបស់វា និងជាមួយវង់ក្រចក
```
### Function ដោយគ្មានប៉ារ៉ាម៉ែត្រនិង return
function អាចត្រូវបានប្រកាសដោយគ្មានប៉ារ៉ាម៉ែត្រ។
**ឧទាហរណ៍:**
```js
// function ដោយ​គ្មាន​ប៉ារ៉ាម៉ែត្រ function ដែល​បង្កើត​ចំនួន​ការ៉េ
function square() {
let num = 2
let sq = num * num
console.log(sq)
}
square() // 4
// function ដោយ​គ្មាន​ប៉ារ៉ាម៉ែត្រ
function addTwoNumbers() {
let numOne = 10
let numTwo = 20
let sum = numOne + numTwo
console.log(sum)
}
addTwoNumbers() // function មួយត្រូវហៅតាមឈ្មោះរបស់វា ទើបអាចប្រតិបត្តិបាន។
```
```js
function printFullName (){
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let space = ' '
let fullName = firstName + space + lastName
console.log(fullName)
}
printFullName() // ការហៅ functino មួយ។
```
### Function ជាមួយតម្លៃ return
function ក៏អាចបោះ​តម្លៃ​វិញ​ដែរ ប្រសិនបើ​អនុគមន៍​មិន​បោះ​តម្លៃនោះ​តម្លៃ​នៃ function នឹងមិន​ត្រូវ​បាន​កំណត់។ អនុញ្ញាតឱ្យយើងសរសេរ function ខាងលើជាមួយនឹងការបោះតម្លៃមកវិញ។ ចាប់ពីពេលនេះតទៅ យើងបោះតម្លៃទៅ function មួយជំនួសឱ្យការបោះពុម្ពវា។
```js
function printFullName (){
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(printFullName())
```
```js
function addTwoNumbers() {
let numOne = 2
let numTwo = 3
let total = numOne + numTwo
return total
}
console.log(addTwoNumbers())
```
### Function ជាមួយប៉ារ៉ាម៉ែត្រ
នៅក្នុង function យើងអាចបញ្ចូលប្រភេទទិន្នន័យផ្សេងៗគ្នា (number, string, boolean, object, function) ជាប៉ារ៉ាម៉ែត្រ។
```js
// function ជាមួយប៉ារ៉ាម៉ែត្រមួយ។
function functionName(parm1) {
//code goes her
}
functionName(parm1) // កំឡុងពេលហៅ
function areaOfCircle(r) {
let area = Math.PI * r * r
return area
}
console.log(areaOfCircle(10)) // គួរតែត្រូវបានហៅដោយ argument មួយ។
function square(number) {
return number * number
}
console.log(square(10))
```
### Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ
```js
// Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ
function functionName(parm1, parm2) {
//code goes her
}
functionName(parm1, parm2) // Function ជាមួយប៉ារ៉ាម៉ែត្រពីរ
// function គ្មាន​ប៉ារ៉ាម៉ែត្រ​មិន​យក​ការ​បញ្ចូល​ទេ ដូច្នេះ​អនុញ្ញាត​ឱ្យយើង​បង្កើត​ function ជាមួយ​ប៉ារ៉ាម៉ែត្រ
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo
console.log(sum)
}
sumTwoNumbers(10, 20) //ហៅ function
// ប្រសិនបើ functino មិន return វាមិនរក្សាទុកទិន្នន័យទេ ដូច្នេះវាគួរតែ return មកវិញ
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo
return sum
}
console.log(sumTwoNumbers(10, 20))
function printFullName(firstName, lastName) {
return `${firstName} ${lastName}`
}
console.log(printFullName('Asabeneh', 'Yetayeh'))
```
### Function ជាមួយប៉ារ៉ាម៉ែត្រជាច្រើន។
```js
// Functino ជាមួយប៉ារ៉ាម៉ែត្រជាច្រើន។
function functionName(parm1, parm2, parm3,...){
//code goes here
}
functionName(parm1,parm2,parm3,...) // កំឡុងពេលហៅ arugment ចំនួនបីដែលត្រូវការ
// function នេះយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយបូកសរុបលេខក្នុងអារេ
function sumArrayValues(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
return sum;
}
const numbers = [1, 2, 3, 4, 5];
//calling a function
console.log(sumArrayValues(numbers));
const areaOfCircle = (radius) => {
let area = Math.PI * radius * radius;
return area;
}
console.log(areaOfCircle(10))
```
### Function ជាមួយនឹងចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់
ពេល​ខ្លះ​យើង​មិន​ដឹង​ថា​តើ​មាន​អាគុយម៉ង់​ប៉ុន្មាន​ដែល​អ្នក​ប្រើ​នឹង​ដាក់។ ដូច្នេះ​ហើយ យើង​គួរ​ដឹង​ពី​របៀប​សរសេរ​មុខងារ​មួយ​ដែល​អាច​យក​ចំនួន​ argument មិន​កំណត់។ វិធីដែលយើងធ្វើវាមានភាពខុសគ្នាខ្លាំងរវាងការប្រកាស regular function (មុខងារធម្មតា) និង arrow function។ ចូរយើងមើលឧទាហរណ៍ទាំងនៅក្នុងមុខងារប្រកាស និងមុខងារព្រួញ។
#### ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់ក្នុង function ធម្មតា
វត្ថុណាមួយដែលបានដាក់ជា argument អាចចូលប្រើបានពី arguments object នៅខាងក្នុង function។ ចូរយើងមើលឧទាហរណ៍មួយ។
```js
// Let us access the arguments object
​
function sumAllNums() {
console.log(arguments)
}
sumAllNums(1, 2, 3, 4)
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
```
```js
// ការប្រកាស functino
​
function sumAllNums() {
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
```
#### ចំនួនប៉ារ៉ាម៉ែត្រគ្មានដែនកំណត់នៅក្នុង arrow function
ដើម្បីអនុវត្តមុខងារដែលយកចំនួនអាគុយម៉ង់មិនកំណត់ក្នុង arrow function យើងប្រើ Spread operator អមដោយឈ្មោះប៉ារ៉ាម៉ែត្រណាមួយ។ អ្វីក៏ដោយដែលយើងដាក់ជាអាគុយម៉ង់ក្នុង function អាចចូលប្រើជាអារេក្នុង arrow function។ ចូរយើងមើលឧទាហរណ៍មួយ។
```js
// Let us access the arguments object
​
const sumAllNums = (...args) => {
// console.log(arguments), រកមិនឃើញវ arguments object នៅក្នុង arrow functino
// ជំនួសមកវិញ យើងប្រើប៉ារ៉ាម៉ែត្រដែលមាន spread operator (...) នៅពីមុខ
console.log(args)
}
sumAllNums(1, 2, 3, 4)
// [1, 2, 3, 4]
```
```js
// function declaration
​
const sumAllNums = (...args) => {
let sum = 0
for (const element of args) {
sum += element
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
```
### Anonymous Function
Anonymous function រឺ function គ្មានឈ្មោះ
```js
const anonymousFun = function() {
console.log(
'I am an anonymous function and my value is stored in anonymousFun'
)
}
```
### Expression Function
Expression functions គឺជា anonymous functions។ បន្ទាប់​ពី​យើង​បង្កើត function ដោយ​មិន​មាន​ឈ្មោះ​ហើយ​យើង​កំណត់​វា​ទៅ​ជា​អថេរ។ ដើម្បីបោះតម្លៃពីអនុគមន៍ យើងគួរហៅអថេរ។ សូមមើលឧទាហរណ៍ខាងក្រោម។
```js
// Function expression
const square = function(n) {
return n * n
}
console.log(square(2)) // -> 4
```
### Self Invoking Functions
Self invoking functions គឺជា anonymous functions ដែលមិនចាំបាច់ហៅដើម្បីឲតម្លៃ។
```js
(function(n) {
console.log(n * n)
})(2) // 4, ប៉ុន្តែជំនួសឱ្យការគ្រាន់តែបោះពុម្ព ប្រសិនបើយើងចង់ត្រឡប់ និងរក្សាទុកទិន្នន័យ យើងធ្វើដូចបានបង្ហាញខាងក្រោម
let squaredNum = (function(n) {
return n * n
})(10)
console.log(squaredNum)
```
### Arrow Function
arrow function គឺជាជម្រើសមួយសម្រាប់សរសេរ functino ទោះជាយ៉ាងណាក៏ដោយ ការប្រកាស function និង arrow functinoមានភាពខុសគ្នាបន្តិចបន្តួច។
arrow functino ប្រើព្រួញជំនួសឱ្យពាក្យគន្លឹះ *function* ដើម្បីប្រកាស function។ អនុញ្ញាតឱ្យយើងឃើញទាំងការប្រកាស function និង arrow function។
```js
// នេះជារបៀបដែលយើងសរសេរ function ធម្មតា
// អនុញ្ញាតឱ្យយើងផ្លាស់ប្តូរ functino នេះទៅជា arrow function
function square(n) {
return n * n
}
console.log(square(2)) // 4
const square = n => {
return n * n
}
console.log(square(2)) // -> 4
// ប្រសិន​បើ​យើង​មាន​តែ​មួយ​បន្ទាត់​នៅ​ក្នុង​ប្លុក​កូដ​នោះ វា​អាច​ត្រូវ​បាន​សរសេរ​ដូច​ខាង​ក្រោម​
const square = n => n * n // -> 4
```
```js
const changeToUpperCase = arr => {
const newArr = []
for (const element of arr) {
newArr.push(element.toUpperCase())
}
return newArr
}
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
console.log(changeToUpperCase(countries))
// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
```
```js
const printFullName = (firstName, lastName) => {
return `${firstName} ${lastName}`
}
console.log(printFullName('Asabeneh', 'Yetayeh'))
```
function ខាងលើមានពាក្យត្រឡប់ តែយើងអាច return វាវិញបានដូចខាងក្រោម។
```js
const printFullName = (firstName, lastName) => `${firstName} ${lastName}`
console.log(printFullName('Asabeneh', 'Yetayeh'))
```
### Function ជាមួយ default parameters
ពេល​ខ្លះ​យើង​បញ្ជូន​តម្លៃ​លំនាំដើម​ទៅ​ប៉ារ៉ាម៉ែត្រ ពេល​យើង​ហៅ​មុខងារ​នេះ បើ​យើង​មិនឲតម្លៃទេ ​លំនាំដើម​នឹង​ត្រូវ​បាន​ប្រើ។ ទាំងការប្រកាសមុខងារ និងមុខងារព្រួញអាចមានតម្លៃលំនាំដើម។
```js
// syntax
// ប្រកាស functino
function functionName(param = value) {
//codes
}
// ហៅ function
functionName()
functionName(arg)
```
**ឧទាហរណ៍:**
```js
function greetings(name = 'Peter') {
let message = `${name}, welcome to 30 Days Of JavaScript!`
return message
}
console.log(greetings())
console.log(greetings('Asabeneh'))
```
```js
function generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') {
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))
```
```js
function calculateAge(birthYear, currentYear = 2019) {
let age = currentYear - birthYear
return age
}
console.log('Age: ', calculateAge(1819))
```
```js
function weightOfObject(mass, gravity = 9.81) {
let weight = mass * gravity + ' N' // តម្លៃត្រូវតែប្តូរទៅ string ជាមុនសិន
return weight
}
console.log('Weight of an object in Newton: ', weightOfObject(100)) //ទំនាញផែនដី ៩.៨១
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // ទំនាញនៅលើផ្ទៃព្រះច័ន្ទ
```
ចូរយើងមើលពីរបៀបដែលយើងសរសេរ functino ខាងលើជាមួយនឹង arrow function
```js
// syntax
// ប្រកាស a function
const functionName = (param = value) => {
//codes
}
// ហៅ function
functionName()
functionName(arg)
```
**ឧទាហរណ៍:**
```js
const greetings = (name = 'Peter') => {
let message = name + ', welcome to 30 Days Of JavaScript!'
return message
}
console.log(greetings())
console.log(greetings('Asabeneh'))
```
```js
const generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => {
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))
```
```js
const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear
console.log('Age: ', calculateAge(1819))
```
```js
const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N'
console.log('Weight of an object in Newton: ', weightOfObject(100)) // ទំនាញផែនដី ៩.៨១
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // ទំនាញនៅលើផ្ទៃព្រះច័ន្ទ
```
### Function declaration និង Arrow function
វានឹងត្រូវបានគ្របដណ្តប់នៅក្នុងផ្នែកផ្សេងទៀត។
🌕 អ្នក​ជា​តារា​ដែល​កំពុង​រះ ឥឡូវ​អ្នក​ដឹង​អំពី function ហើយ។ អ្នកបានឈាន 7 ជំហាន ឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់
### លំហាត់៖ កម្រិត ១
1. ប្រកាស function _fullName_ ហើយវាបោះពុម្ពឈ្មោះពេញរបស់អ្នក។
2. ប្រកាស function _fullName_ ហើយឥឡូវនេះវាយកឈ្មោះដំបូង ឈ្មោះចុងក្រោយជាប៉ារ៉ាម៉ែត្រ ហើយវាឲឈ្មោះពេញរបស់អ្នក។
3. ប្រកាសមុខងារ _addNumbers_ ហើយវាត្រូវការប៉ារ៉ាម៉ែត្រពីរ ហើយវាត្រឡប់ផលបូករបស់ប៉ារ៉ាម៉ែត្រនោះ។
4. ផ្ទៃដីនៃចតុកោណកែងត្រូវបានគណនាដូចខាងក្រោម៖ _area = បណ្តោយ x ទទឹង_។ សរសេរ function ដែលគណនា _areaOfRectangle_ ។
5. បរិវេណនៃចតុកោណកែងត្រូវបានគណនាដូចខាងក្រោម៖ _perimeter= 2x(បណ្តោយ + ទទឹង)_. សរសេរមុខងារដែលគណនា_perimeterOfRectangle_.
6. បរិមាណនៃព្រីសរាងចតុកោណត្រូវបានគណនាដូចខាងក្រោម៖ _volume = បណ្តោយ x ទទឹង x កំពស់ _ ។ សរសេរអនុគមន៍ដែលគណនា _volumeOfRectPrism_ ។
7. ផ្ទៃដីនៃរង្វង់ត្រូវបានគណនាដូចខាងក្រោម៖ _area = π x r x r_ ។ សរសេរអនុគមន៍ដែលគណនា _areaOfCircle_
8. រង្វង់រង្វង់ត្រូវបានគណនាដូចខាងក្រោម៖ _circumference = 2πr_ ។ សរសេរអនុគមន៍ដែលគណនា _circumOfCircle_
9. ដង់ស៊ីតេនៃសារធាតុត្រូវបានគណនាដូចខាងក្រោម៖ _ដង់ស៊ីតេ = ម៉ាស/បរិមាណ _។ សរសេរអនុគមន៍ដែលគណនា _ដង់ស៊ីតេ_។
10. ល្បឿនត្រូវបានគណនាដោយបែងចែកចម្ងាយសរុបដែលគ្របដណ្ដប់ដោយវត្ថុផ្លាស់ទីចែកនឹងចំនួនសរុបនៃពេលវេលាដែលបានយក សរសេរអនុគមន៍ដែលគណនាល្បឿននៃវត្ថុផ្លាស់ទី _speed_ ។
11. ទំងន់នៃសារធាតុមួយត្រូវបានគណនាដូចខាងក្រោម: _weight = mass x gravity_. សរសេរមុខងារដែលគណនា _weight_ ។
12. សីតុណ្ហភាពក្នុង oC អាចបំប្លែងទៅជា oF ដោយប្រើរូបមន្តនេះ៖ _oF = (oC x 9/5) + 32_ ។ សរសេរមុខងារដែលបំលែង oC ទៅជា oF _convertCelsiusToFahrenheit_ ។
13. Body Mass Index (BMI) ត្រូវបានគណនាដូចខាងក្រោម៖ _bmi = ទម្ងន់គិតជា Kg / (កម្ពស់ x កម្ពស់) ក្នុង m2_ ។ សរសេរអនុគមន៍ដែលគណនា _bmi_ ។ BMI ត្រូវបានប្រើដើម្បីកំណត់យ៉ាងទូលំទូលាយក្រុមទម្ងន់ផ្សេងៗគ្នាចំពោះមនុស្សពេញវ័យដែលមានអាយុចាប់ពី 20 ឆ្នាំឡើងទៅ។ ពិនិត្យមើលថាតើមនុស្សម្នាក់មានទម្ងន់ _ ក្រោម ធម្មតា លើសទម្ងន់ _ ឬ _ធាត់_ ដោយផ្អែកលើព័ត៌មានដែលបានផ្តល់ឱ្យខាងក្រោម។
- ក្រុមដូចគ្នាអនុវត្តចំពោះបុរសនិងស្ត្រី។
- _Underweight_: BMI តិចជាង 18.5
- _ទម្ងន់ធម្មតា_៖ BMI គឺ 18.5 ដល់ 24.9
- _លើសទម្ងន់_៖ BMI គឺ 25 ទៅ 29.9
- _Obese_: BMI is 30 or more
14. សរសេរមុខងារមួយហៅថា _checkSeason_ វាយកខែ ហើយត្រឡប់រដូវកាលវិញ៖ សរទរដូវ រដូវរងា និទាឃរដូវ ឬរដូវក្តៅ។
15. Math.max ត្រឡប់អាគុយម៉ង់ធំបំផុតរបស់វា។ សរសេរអនុគមន៍ findMax ដែលយកអាគុយម៉ង់បី ហើយត្រឡប់អតិបរមារបស់វាដោយមិនប្រើវិធីសាស្ត្រ Math.max ។
```js
console.log(findMax(0, 10, 5))
10
console.log(findMax(0, -10, -2))
0
```
### លំហាត់៖ កម្រិត ២
1. សមីការលីនេអ៊ែរត្រូវបានគណនាដូចខាងក្រោមៈ _ax + ដោយ + c = 0_ ។ សរសេរអនុគមន៍ដែលគណនាតម្លៃនៃសមីការលីនេអ៊ែរ _solveLinEquation_។
1. សមីការការ៉េត្រូវបានគណនាដូចខាងក្រោម៖ _ax2 + bx + c = 0_ ។ សរសេរអនុគមន៍ដែលគណនាតម្លៃនៃសមីការការ៉េ _solveQuadEquation_។
```js
console.log(solveQuadratic()) // {0}
console.log(solveQuadratic(1, 4, 4)) // {-2}
console.log(solveQuadratic(1, -1, -2)) // {2, -1}
console.log(solveQuadratic(1, 7, 12)) // {-3, -4}
console.log(solveQuadratic(1, 0, -4)) //{2, -2}
console.log(solveQuadratic(1, -1, 0)) //{1, 0}
```
1. ប្រកាសឈ្មោះមុខងារ _printArray_ ។ វាយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយវាបោះពុម្ពចេញតម្លៃនីមួយៗនៃអារេ។
1. សរសេរឈ្មោះមុខងារ _showDateTime_ ដែលបង្ហាញពេលវេលាក្នុងទម្រង់នេះ៖ 08/01/2020 04:08 ដោយប្រើវត្ថុកាលបរិច្ឆេទ។
```sh
showDateTime()
08/01/2020 04:08
```
1. ប្រកាសឈ្មោះមុខងារ _swapValues_ ។ មុខងារនេះប្តូរតម្លៃនៃ x ទៅ y ។
```js
swapValues(3, 4) // x => 4, y=>3
swapValues(4, 5) // x = 5, y = 4
```
1. ប្រកាសឈ្មោះមុខងារ _reverseArray_ ។ វា​យក​អារេ​ជា​ប៉ារ៉ាម៉ែត្រ ហើយ​វា​ត្រឡប់​ការ​បញ្ច្រាស​នៃ​អារេ (កុំ​ប្រើ method)។
```js
console.log(reverseArray([1, 2, 3, 4, 5]))
//[5, 4, 3, 2, 1]
console.log(reverseArray(['A', 'B', 'C']))
//['C', 'B', 'A']
```
1. ប្រកាសឈ្មោះមុខងារ _capitalizeArray_ ។ វា​យក​អារេ​ជា​ប៉ារ៉ាម៉ែត្រ​មួយ​ហើយ​វា​ត្រឡប់​ - អក្សរធំ។
1. ប្រកាសឈ្មោះមុខងារ _addItem_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រធាតុមួយ ហើយវាត្រឡប់អារេមួយបន្ទាប់ពីបន្ថែមធាតុ
1. ប្រកាសឈ្មោះមុខងារ _removeItem_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រ index ហើយវាត្រឡប់អារេមួយបន្ទាប់ពីយកធាតុចេញ
1. ប្រកាសឈ្មោះអនុគមន៍ _sumOfNumbers_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រលេខ ហើយវាបូកលេខទាំងអស់នៅក្នុងជួរនោះ។
1. ប្រកាសឈ្មោះមុខងារ _sumOfOdds_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រលេខមួយ ហើយវាបន្ថែមលេខសេសទាំងអស់នៅក្នុងជួរនោះ។
1. ប្រកាសឈ្មោះមុខងារ _sumOfEven_ ។ វាត្រូវការប៉ារ៉ាម៉ែត្រលេខមួយ ហើយវាបន្ថែមលេខគូទាំងអស់ក្នុងជួរនោះ។
1. ប្រកាសឈ្មោះមុខងារ evensAndOdds ។ វាយកចំនួនគត់វិជ្ជមានជាប៉ារ៉ាម៉ែត្រ ហើយវារាប់ចំនួនគូ និងសេសក្នុងចំនួន។
```sh
evensAndOdds(100);
The number of odds are 50.
The number of evens are 51.
```
1. សរសេរអនុគមន៍ដែលយកចំនួនអាគុយម៉ង់ណាមួយ ហើយត្រឡប់ផលបូកនៃអាគុយម៉ង់
```js
sum(1, 2, 3) // -> 6
sum(1, 2, 3, 4) // -> 10
```
1. សរសេរ function ដែលបង្កើត _randomUserIp_ ។
1. សរសេរ function ដែលបង្កើត _randomMacAddress_
1. ប្រកាស functino ឈ្មោះ _randomHexaNumberGenerator_ ។ function ឲលេខគោលដប់ប្រាំមួយចៃដន្យ។
```sh
console.log(randomHexaNumberGenerator());
'#ee33df'
```
1. ប្រកាសឈ្មោះ function _userIdGenerator_ ។ នៅពេលដែលមុខងារនេះត្រូវបានគេហៅថា វាបង្កើតលេខសម្គាល់តួអក្សរប្រាំពីរ។ មុខងារបញ្ជូនលេខសម្គាល់មកវិញ។
```sh
console.log(userIdGenerator());
41XTDbE
```
### លំហាត់៖ កម្រិត ៣
1. កែប្រែ function _userIdGenerator_ ។ ប្រកាសឈ្មោះ function _userIdGeneratedByUser_ ។ វា​មិន​យក​ប៉ារ៉ាម៉ែត្រ​តែមួយ​ទេ ប៉ុន្តែ​វា​ត្រូវការ​បញ្ចូល​ពីរ​ដោយ​ប្រើ prompt() ។ ការបញ្ចូលមួយគឺចំនួនតួអក្សរ ហើយការបញ្ចូលទីពីរគឺជាចំនួនលេខសម្គាល់ដែលសន្មត់ថាត្រូវបានបង្កើត។
```sh
userIdGeneratedByUser()
'kcsy2
SMFYb
bWmeq
ZXOYh
2Rgxf
'
userIdGeneratedByUser()
'1GCSgPLMaBAVQZ26
YD7eFwNQKNs7qXaT
ycArC5yrRupyG00S
UbGxOFI7UXSWAyKN
dIV0SSUTgAdKwStr
'
```
1. សរសេរឈ្មោះ function _rgbColorGenerator_ ហើយវាបង្កើតពណ៌ rgb ។
```sh
rgbColorGenerator()
rgb(125,244,255)
```
1. សរសេរ functino **_arrayOfHexaColors_** ដែលត្រឡប់ចំនួនពណ៌គោលដប់ប្រាំមួយក្នុងអារេមួយ។
1. សរសេរមុខងារ **_arrayOfRgbColors_** ដែលត្រឡប់ចំនួនពណ៌ RGB ណាមួយនៅក្នុងអារេមួយ។
1. សរសេរមុខងារ **_convertHexaToRgb_** ដែលបំប្លែងពណ៌ hexa ទៅ rgb ហើយវាត្រឡប់ពណ៌ rgb ។
1. សរសេរមុខងារ **_convertRgbToHexa_** ដែលបំប្លែង rgb ទៅជាពណ៌គោលដប់ប្រាំមួយ ហើយវាត្រឡប់ពណ៌ hex មួយ។
1. សរសេរមុខងារ **_generateColors_** ដែលអាចបង្កើតចំនួនពណ៌ hex ឬ rgb ណាមួយ។
```js
console.log(generateColors('hexa', 3)) // ['#a3e12f', '#03ed55', '#eb3d2b']
console.log(generateColors('hexa', 1)) // '#b334ef'
console.log(generateColors('rgb', 3)) // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)']
console.log(generateColors('rgb', 1)) // 'rgb(33,79, 176)'
```
1. ហៅមុខងាររបស់អ្នក _shuffleArray_ វាយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយវាត្រឡប់អារេដែលសាប់
1. ហៅទៅមុខងាររបស់អ្នក _factorial_ វាយកលេខទាំងមូលជាប៉ារ៉ាម៉ែត្រ ហើយវាត្រឡប់លេខហ្វាតូរីស
1. ហៅមុខងាររបស់អ្នក _isEmpty_ វាត្រូវការប៉ារ៉ាម៉ែត្រ ហើយវាពិនិត្យមើលថាតើវាទទេឬអត់
1. ហៅទៅអនុគមន៍ _sum_ របស់អ្នក វាយកចំនួនអាគុយម៉ង់ណាមួយ ហើយវាត្រឡប់ផលបូក។
1. សរសេរអនុគមន៍មួយហៅថា _sumOfArrayItems_ វាយកប៉ារ៉ាម៉ែត្រអារេមួយ ហើយត្រឡប់ផលបូកនៃធាតុទាំងអស់។ ពិនិត្យមើលថាតើធាតុអារេទាំងអស់ជាប្រភេទលេខឬអត់។ បើមិនផ្តល់មតិត្រឡប់សមហេតុផល។
1. សរសេរអនុគមន៍មួយហៅថា _average_ វាត្រូវការប៉ារ៉ាម៉ែត្រអារេមួយ ហើយត្រឡប់ជាមធ្យមនៃធាតុ។ ពិនិត្យមើលថាតើធាតុអារេទាំងអស់ជាប្រភេទលេខឬអត់។ បើមិនផ្តល់មតិត្រឡប់សមហេតុផល។
1. សរសេរអនុគមន៍មួយហៅថា _modifyArray_ ដែលយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយកែប្រែធាតុទីប្រាំនៃអារេ ហើយត្រឡប់អារេ។ ប្រសិនបើប្រវែងអារេតិចជាងប្រាំ វាត្រឡប់ 'រកមិនឃើញធាតុ' ។
```js
console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']);
```
```sh
['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot']
```
```js
console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft', 'IBM']);
```
```sh
['Google', 'Facebook','Apple', 'Amazon','MICROSOFT', 'IBM']
```
```js
console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']);
```
```sh
'Not Found'
```
1. សរសេរមុខងារមួយហៅថា _isPrime_ ដែលពិនិត្យមើលថាតើលេខមួយគឺជាលេខបឋមឬអត់។
1.សរសេរមុខងារដែលពិនិត្យមើលថាតើធាតុទាំងអស់មានតែមួយគត់នៅក្នុងអារេ។
1. សរសេរមុខងារដែលពិនិត្យមើលថាតើធាតុទាំងអស់នៃអារេគឺជាប្រភេទទិន្នន័យដូចគ្នាឬអត់។
1. ឈ្មោះអថេរ JavaScript មិនគាំទ្រតួអក្សរ ឬនិមិត្តសញ្ញាពិសេស លើកលែងតែ \$ ឬ \_ ។ សរសេរមុខងារ **isValidVariable** ដែលពិនិត្យមើលថាតើអថេរមួយត្រឹមត្រូវ ឬអថេរអថេរ។
1. សរសេរអនុគមន៍ដែលត្រឡប់អារេនៃលេខចៃដន្យប្រាំពីរក្នុងជួរ 0-9 ។ លេខទាំងអស់ត្រូវតែមានតែមួយ។
```js
sevenRandomNumbers()
[(1, 4, 5, 7, 9, 8, 0)]
```
1. សរសេរអនុគមន៍មួយហៅថា reverseCountries វាយកប្រទេសអារេ ហើយដំបូងវាចម្លងអារេ ហើយត្រឡប់អារេបញ្ច្រាសដើម
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 6](../06_Day_Loops/06_day_loops.md) | [ថ្ងៃទី 8 >>](../08_Day_Objects/08_day_objects.md)

598
Khmer/08_Day_Objects/08_day_objects.md
Unescape View File

@ -0,0 +1,598 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: Objects</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 7](../07_Day_Functions/07_day_functions.md) | [ថ្ងៃទី 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md)
![Thirty Days Of JavaScript](../images/banners/day_1_8.png)
- [📔 ថ្ងៃទី 8](#-day-8)
- [Scope](#scope)
- [Window Global Object](#window-global-object)
- [Global scope](#global-scope)
- [Local scope](#local-scope)
- [📔 Object](#-object)
- [ការបង្កើត object ទទេ](#creating-an-empty-object)
- [ការបង្កើត object ជាមួយនឹងតម្លៃ](#creating-an-objecting-with-values)
- [ទាញតម្លៃពី object](#getting-values-from-an-object)
- [ការបង្កើត object methods](#creating-object-methods)
- [ការកំណត់ key សម្រាប់ object](#setting-new-key-for-an-object)
- [Object Methods](#object-methods)
- [ចាប់យក key ពី object ដោយប្រើ Object.keys()](#getting-object-keys-using-objectkeys)
- [ចាប់យកតម្លៃពី object ដោយប្រើ Object.values()](#getting-object-values-using-objectvalues)
- [ចាប់យក key និង តម្លៃ ពី object ដោយប្រើ Object.entries()](#getting-object-keys-and-values-using-objectentries)
- [ពិនិត្យមើល properties ដោយប្រើ hasOwnProperty()](#checking-properties-using-hasownproperty)
- [💻 លំហាត់](#-exercises)
- [លំហាត់៖ កម្រិត ១](#exercises-level-1)
- [លំហាត់៖ កម្រិត ២](#exercises-level-2)
- [លំហាត់៖ កម្រិត ៣](#exercises-level-3)
# 📔 ថ្ងៃទី 8
## Scope
variable គឺជាផ្នែកមូលដ្ឋានក្នុងការសរសេរកម្មវិធី។ យើងប្រកាស variable ដើម្បីរក្សាទុកប្រភេទទិន្នន័យផ្សេងៗគ្នា។ ដើម្បីប្រកាស variable យើងប្រើពាក្យគន្លឹះ _var_, _let_ និង _const_ ។ variable អាចត្រូវបានប្រកាសនៅ scope ផ្សេងៗគ្នា។ ក្នុង​ផ្នែក​នេះ យើង​នឹង​មើលលើ scope ​នៃ variable scope ​នៃ​អថេរ​ពេល​យើង​ប្រើ var ឬ let ។
variable scope អាចជា៖
- Global
- Local
variable អាចត្រូវបានប្រកាសជា global scope រឺក៏ local scope។
អ្វី​ដែល​បាន​ប្រកាស​ដោយ​មិនប្រើ let, var ឬ const ត្រូវ​បាន​កំណត់​ក្នុង​កម្រិត​សកល។
អនុញ្ញាតឱ្យយើងស្រមៃថាយើងមានឯកសារ scope.js ។
### Window Global Object
ដោយមិនប្រើ console.log() បើកកម្មវិធីរុករករបស់អ្នក ហើយពិនិត្យ អ្នកនឹងឃើញតម្លៃ a និង b ប្រសិនបើអ្នកសរសេរ a ឬ b នៅលើ browser ។ នោះមានន័យថា a និង b មានរួចហើយនៅក្នុង window។
```js
//scope.js
a = 'JavaScript' // ការប្រកាសអថេរដោយមិនប្រើ let ឬ const ធ្វើឱ្យវាមាននៅក្នុង window object ហើយអាចរកឃើញគ្រប់ទីកន្លែង
b = 10 // នេះគឺជា variable scope សកល ហើយបានរកឃើញនៅក្នុង window object
function letsLearnScope() {
console.log(a, b)
if (true) {
console.log(a, b)
}
}
console.log(a, b) // អាចចូលប្រើបាន
```
### Global scope
អថេរ​ដែល​បាន​ប្រកាស​ជា​សកល​អាច​ចូល​ប្រើ​បាន​គ្រប់​ទីកន្លែង​ក្នុង​ឯកសារ​តែមួយ។ ប៉ុន្តែពាក្យសកលគឺទាក់ទង។ វាអាចជាសកលសម្រាប់ឯកសារ ឬវាអាចជាសកលទាក់ទងនឹងប្លុកនៃកូដមួយចំនួន។
```js
//scope.js
let a = 'JavaScript' // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។
let b = 10 // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។
function letsLearnScope() {
console.log(a, b) // JavaScript 10, accessible
if (true) {
let a = 'Python'
let b = 100
console.log(a, b) // Python 100
}
console.log(a, b)
}
letsLearnScope()
console.log(a, b) // JavaScript 10, accessible
```
### Local scope
variable ដែលបានប្រកាសថាជា local អាចចូលប្រើបានតែនៅក្នុងកូដប្លុកជាក់លាក់ប៉ុណ្ណោះ។
- Block Scope
- Function Scope
```js
//scope.js
let a = 'JavaScript' // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។
let b = 10 // គឺជា scope សកល វានឹងត្រូវបានរកឃើញគ្រប់ទីកន្លែងនៅក្នុងឯកសារនេះ។
// Function scope
function letsLearnScope() {
console.log(a, b) // JavaScript 10, accessible
let value = false
// block scope
if (true) {
// យើងអាចចូលប្រើបានពីមុខងារ និងនៅខាងក្រៅមុខងារ ប៉ុន្តែ
// variable ដែលបានប្រកាសនៅខាងក្នុង if នឹងមិនអាចប្រើនៅខាងក្រៅ if block
let a = 'Python'
let b = 20
let c = 30
let d = 40
value = !value
console.log(a, b, c, value) // Python 20 30 true
}
// យើងមិនអាចចូលប្រើ c ព្រោះ scope របស់ c គឺមានតែ if block ប៉ុណ្ណោះ។
console.log(a, b, value) // JavaScript 10 true
}
letsLearnScope()
console.log(a, b) // JavaScript 10, accessible
```
ឥឡូវនេះ អ្នកមានការយល់ដឹងអំពី scope។ variable ​ដែល​បាន​ប្រកាស​ដោយ *var* ដែល​មាន​ scope ​សម្រាប់​តែ​ function ប៉ុន្តែ​អថេរ​ដែលបាន​ប្រកាស​ដោយ *let* ឬ *const* គឺ​ជា block scope (function block, if block, loop block, etc)។ ប្លុកនៅក្នុង JavaScript គឺជាកូដមួយនៅចន្លោះតង្កៀបអង្កាញ់ពីរ ({})។
```js
//scope.js
function letsLearnScope() {
var gravity = 9.81
console.log(gravity)
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
if (true){
var gravity = 9.81
console.log(gravity) // 9.81
}
console.log(gravity) // 9.81
for(var i = 0; i < 3; i++){
console.log(i) // 0, 1, 2
}
console.log(i) // 3
```
នៅក្នុង ES6 និងខ្ពស់ជាងនេះមាន *let* និង *const* ដូច្នេះអ្នកនឹងមិនទទួលរងពីភាពមិនច្បាស់លាស់នៃ *var* នោះទេ។ នៅពេលយើងប្រើ *let* អថេររបស់យើងត្រូវបានទប់ស្កាត់ ហើយវានឹងមិនឆ្លងផ្នែកផ្សេងទៀតនៃកូដរបស់យើងទេ។
```js
//scope.js
function letsLearnScope() {
// អ្នកអាចប្រើ let ឬ const ប៉ុន្តែទំនាញគឺថេរ ចឹងខ្ញុំនិងប្រើ const
const gravity = 9.81
console.log(gravity)
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
if (true){
const gravity = 9.81
console.log(gravity) // 9.81
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
for(let i = 0; i < 3; i++){
console.log(i) // 0, 1, 2
}
// console.log(i), Uncaught ReferenceError: i is not defined
```
The scope *let* and *const* are the same. The difference is only reassigning. We can not change or reassign the value of the `const` variable. I would strongly suggest you to use *let* and *const*, by using *let* and *const* you will write clean code and avoid hard to debug mistakes. As a rule of thumb, you can use *let* for any value which change, *const* for any constant value, and for an array, object, arrow function and function expression.
scope *let* និង *const* គឺដូចគ្នា។ ភាពខុសគ្នាគឺគ្រាន់តែជាការចាត់តាំងឡើងវិញប៉ុណ្ណោះ។ យើងមិនអាចផ្លាស់ប្តូរ ឬកំណត់តម្លៃនៃអថេរ `const` ឡើងវិញបានទេ។ ខ្ញុំសូមណែនាំអ្នកឱ្យប្រើ *let* និង *const* ដោយប្រើ *let* និង *const* អ្នកនឹងសរសេរកូដស្អាត ហើយជៀសវាងការលំបាកក្នុង debug កំហុស។ តាមក្បួន អ្នកអាចប្រើ *let* សម្រាប់តម្លៃណាមួយដែលផ្លាស់ប្តូរ *const* សម្រាប់តម្លៃថេរណាមួយ និងសម្រាប់អារេ object, arrow function និងកន្សោម function។
## 📔 Object
អ្វីគ្រប់យ៉ាងអាចជា object មួយ ហើយ object មានលក្ខណៈសម្បត្តិ ហើយលក្ខណៈសម្បត្តិមានតម្លៃ ដូច្នេះ object គឺជាគូ key និង value លំដាប់នៃ key មិនត្រូវបានបម្រុងទុកឬមិនមានលំដាប់។
ដើម្បីបង្កើត object literal យើងប្រើតង្កៀបអង្កាញ់ពីរ។
### ការបង្កើត object ទទេ
object ទទេ
```js
const person = {}
```
### ការបង្កើត object ជាមួយនឹងតម្លៃ
ឥឡូវនេះ person object មាន firstName, lastName, age, location, skills និង isMarried property។ តម្លៃនៃ property ឬ key អាចជា string, number, boolean, object, null, undefined រឺក៏ function
ចូរយើងមើលឧទាហរណ៍ខ្លះនៃ object។ key នីមួយៗមានតម្លៃនៅក្នុង object។
```js
const rectangle = {
length: 20,
width: 20
}
console.log(rectangle) // {length: 20, width: 20}
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
isMarried: true
}
console.log(person)
```
### ទាញយកតម្លៃពី object
យើងអាចចូលប្រើតម្លៃនៃ object ដោយប្រើវិធីពីរយ៉ាង៖
- ការប្រើប្រាស់ . បន្តដោយឈ្មោះគន្លឹះ ប្រសិនបើ key-name គឺជាពាក្យតែមួយ
- ដោយប្រើតង្កៀបការ៉េ និង quote
```js
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
getFullName: function() {
return `${this.firstName}${this.lastName}`
},
'phone number': '+3584545454545'
}
// ការចូលប្រើតម្លៃដោយប្រើ .
console.log(person.firstName)
console.log(person.lastName)
console.log(person.age)
console.log(person.location) // undefined
// តម្លៃអាចត្រូវបានចូលប្រើដោយប្រើតង្កៀបការ៉េ និងឈ្មោះ key
console.log(person['firstName'])
console.log(person['lastName'])
console.log(person['age'])
console.log(person['age'])
console.log(person['location']) // undefined
// ឧទាហរណ៍ ដើម្បីចូលប្រើលេខទូរស័ព្ទ យើងប្រើតែវិធីតង្កៀបការ៉េប៉ុណ្ណោះ។
console.log(person['phone number'])
```
### ការបង្កើត object methods
ឥឡូវនេះ person object មាន getFullName property។ getFullName គឺជា function ខាងក្នុងរបស់ person object ហើយយើងហៅវាថា object method។ ពាក្យគន្លឹះ _this_ សំដៅលើ object ខ្លួនឯង។ យើង​អាច​ប្រើ​ពាក្យ _this_ ដើម្បី​ចូល​ប្រើ​តម្លៃ​នៃ​លក្ខណៈ​សម្បត្តិ​ផ្សេងៗ​របស់​វត្ថុ។ យើងមិនអាចប្រើ arrow function ជា object method បានទេ ព្រោះពាក្យនេះសំដៅលើ window នៅខាងក្នុងមុខងារ arrow ជំនួសឱ្យ object ផ្ទាល់។ ឧទាហរណ៍នៃ object
```js
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
getFullName: function() {
return `${this.firstName} ${this.lastName}`
}
}
console.log(person.getFullName())
// Asabeneh Yetayeh
```
### ការកំណត់ key ថ្មីសម្រាប់ object
វត្ថុគឺជារចនាសម្ព័ន្ធទិន្នន័យដែលអាចផ្លាស់ប្តូរបានហើយយើងអាចកែប្រែតម្លៃនៃ objectមួយបន្ទាប់ពីវាបង្កើតរួច។
ការកំណត់ key ថ្មីសម្រាប់ object
```js
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
getFullName: function() {
return `${this.firstName} ${this.lastName}`
}
}
person.nationality = 'Ethiopian'
person.country = 'Finland'
person.title = 'teacher'
person.skills.push('Meteor')
person.skills.push('SasS')
person.isMarried = true
person.getPersonInfo = function() {
let skillsWithoutLastSkill = this.skills
.splice(0, this.skills.length - 1)
.join(', ')
let lastSkill = this.skills.splice(this.skills.length - 1)[0]
let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`
let fullName = this.getFullName()
let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.`
return statement
}
console.log(person)
console.log(person.getPersonInfo())
```
```sh
Asabeneh Yetayeh is a teacher.
He lives in Finland.
He teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS.
```
### Object Methods
មាន method ផ្សេងគ្នាដើម្បីរៀបចំ object។ អនុញ្ញាតឱ្យយើងមើល method យចំនួនដែលមាន។
_Object.assign_: ដើម្បីចម្លង object ដោយមិនកែប្រែ object ដើម
```js
const person = {
firstName: 'Asabeneh',
age: 250,
country: 'Finland',
city:'Helsinki',
skills: ['HTML', 'CSS', 'JS'],
title: 'teacher',
address: {
street: 'Heitamienkatu 16',
pobox: 2002,
city: 'Helsinki'
},
getPersonInfo: function() {
return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.`
}
}
//Object methods: Object.assign, Object.keys, Object.values, Object.entries
//hasOwnProperty
const copyPerson = Object.assign({}, person)
console.log(copyPerson)
```
#### ទាញយក object key ដោយប្រើ Object.keys()
_Object.keys_: ដើម្បីទទួលបាន key ឬ property របស់វត្ថុជាអារេ
```js
const keys = Object.keys(copyPerson)
console.log(keys) //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo']
const address = Object.keys(copyPerson.address)
console.log(address) //['street', 'pobox', 'city']
```
#### ទាញយក object value ដោយប្រើ Object.keys()
_Object.values_:ដើម្បីទទួលបានតម្លៃនៃវត្ថុជាអារេ
```js
const values = Object.values(copyPerson)
console.log(values)
```
#### ទាញយក object value និង key ដោយប្រើ Object.entries()
_Object.entries_:ដើម្បីទទួលបាន key និងតម្លៃនៅក្នុងអារេមួយ។
```js
const entries = Object.entries(copyPerson)
console.log(entries)
```
#### ពិនិត្យ property ដោយប្រើ hasOwnProperty()
_hasOwnProperty_: ដើម្បី​ពិនិត្យ​មើល​ថា​តើ​ key ឬ​ property មាន​ក្នុង​វត្ថុ​ឬ​អត់
```js
console.log(copyPerson.hasOwnProperty('name'))
console.log(copyPerson.hasOwnProperty('score'))
```
🌕 អ្នកពិតជាគួរឲភ្ញាក់ផ្អើលណាស់។ អ្នកទើបតែបានបញ្ចប់ challenge ថ្ងៃទី 8 ហើយអ្នកបានឈាន 8 ជំហាន ឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់
### លំហាត់៖ កម្រិត ១
1. បង្កើត object ទទេមួយហៅថាឆ្កែ
1. បង្ហាញ object ឆ្កែនៅលើកុងសូល។
1. បន្ថែមឈ្មោះ ជើង ពណ៌ អាយុ និងលក្ខណៈសម្បត្តិ bark សម្រាប់វត្ថុឆ្កែ។ លក្ខណសម្បត្តិ bark គឺជា method ដែលឲ _woof woof_
1. ទាញយកឈ្មោះ ជើង ពណ៌ អាយុ និងតម្លៃ bark ពី object ឆ្កែ
1. កំណត់លក្ខណៈសម្បត្តិថ្មីនៃ object ឆ្កែ៖ ពូជ getDogInfo
### លំហាត់៖ កម្រិត ២
1. ស្វែងរកមនុស្សដែលមានជំនាញជាច្រើននៅក្នុង object user
1. រាប់​អ្នក​ប្រើ​ដែល​ចូល រាប់​អ្នក​ប្រើ​ដែល​មាន​ចំនួន​ធំ​ជាង​ស្មើ​នឹង 50 ពិន្ទុ​ពី​ object ​ខាងក្រោម។
````js
const users = {
Alex: {
email: 'alex@alex.com',
skills: ['HTML', 'CSS', 'JavaScript'],
age: 20,
isLoggedIn: false,
points: 30
},
Asab: {
email: 'asab@asab.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
age: 25,
isLoggedIn: false,
points: 50
},
Brook: {
email: 'daniel@daniel.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
age: 30,
isLoggedIn: true,
points: 50
},
Daniel: {
email: 'daniel@alex.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
age: 20,
isLoggedIn: false,
points: 40
},
John: {
email: 'john@john.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
age: 20,
isLoggedIn: true,
points: 50
},
Thomas: {
email: 'thomas@thomas.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React'],
age: 20,
isLoggedIn: false,
points: 40
},
Paul: {
email: 'paul@paul.com',
skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],
age: 20,
isLoggedIn: false,
points: 40
}
}```
1. ស្វែងរកមនុស្សដែលជាអ្នកអភិវឌ្ឍន៍ MERN ពី object អ្នកប្រើប្រាស់
1. កំណត់ឈ្មោះរបស់អ្នកនៅក្នុង user object ដោយមិនកែប្រែវ user object ដើម
1. ទាញយក key ឬ property ទាំងអស់របស់វត្ថុអ្នកប្រើប្រាស់
1. ទទួលបានតម្លៃទាំងអស់នៃ object user
1. ប្រើវត្ថុប្រទេសដើម្បីបោះពុម្ពឈ្មោះប្រទេស រាជធានី ចំនួនប្រជាជន និងភាសា។
### លំហាត់៖ កម្រិត ៣
1. បង្កើត object literal ដែលហៅថា _personAccount_ ។ វាមាន _firstName, lastName, incomes, cost_ properties ហើយវាមាន _totalIncome, totalExpense, accountInfo, addIncome, addExpense_ និង _accountBalance_ method។ ប្រាក់ចំណូល គឺជាសំណុំនៃប្រាក់ចំណូល ហើយការពិពណ៌នា និងការចំណាយរបស់វា គឺជាសំណុំនៃប្រាក់ចំណូល និងការពិពណ៌នារបស់វា។
2. **** សំណួរ៖ 2, 3 និង 4 គឺផ្អែកលើអារេពីរខាងក្រោម៖ user និង product ()
```js
const users = [
{
_id: 'ab12ex',
username: 'Alex',
email: 'alex@alex.com',
password: '123123',
createdAt:'08/01/2020 9:00 AM',
isLoggedIn: false
},
{
_id: 'fg12cy',
username: 'Asab',
email: 'asab@asab.com',
password: '123456',
createdAt:'08/01/2020 9:30 AM',
isLoggedIn: true
},
{
_id: 'zwf8md',
username: 'Brook',
email: 'brook@brook.com',
password: '123111',
createdAt:'08/01/2020 9:45 AM',
isLoggedIn: true
},
{
_id: 'eefamr',
username: 'Martha',
email: 'martha@martha.com',
password: '123222',
createdAt:'08/01/2020 9:50 AM',
isLoggedIn: false
},
{
_id: 'ghderc',
username: 'Thomas',
email: 'thomas@thomas.com',
password: '123333',
createdAt:'08/01/2020 10:00 AM',
isLoggedIn: false
}
];
const products = [
{
_id: 'eedfcf',
name: 'mobile phone',
description: 'Huawei Honor',
price: 200,
ratings: [
{ userId: 'fg12cy', rate: 5 },
{ userId: 'zwf8md', rate: 4.5 }
],
likes: []
},
{
_id: 'aegfal',
name: 'Laptop',
description: 'MacPro: System Darwin',
price: 2500,
ratings: [],
likes: ['fg12cy']
},
{
_id: 'hedfcg',
name: 'TV',
description: 'Smart TV:Procaster',
price: 400,
ratings: [{ userId: 'fg12cy', rate: 5 }],
likes: ['fg12cy']
}
]
```
ស្រមៃថាអ្នកកំពុងទទួលបានអ្នកប្រើប្រាស់ខាងលើពីមូលដ្ឋានទិន្នន័យ MongoDB ។
a. បង្កើត functionមួយហៅថា signUp ដែលអនុញ្ញាតឱ្យបន្ថែមអ្នកប្រើទៅបណ្តុំ។ ប្រសិនបើមានអ្នកប្រើប្រាស់ហើយ សូមជូនដំណឹងដល់អ្នកប្រើប្រាស់ថាគាត់មានគណនីរួចហើយ។
b. បង្កើត function មួយហៅថា signIn ដែលអនុញ្ញាតឱ្យអ្នកប្រើចូលកម្មវិធី
3. អារេផលិតផលមានធាតុបី ហើយពួកវានីមួយៗមាន property ប្រាំមួយ។
a. បង្កើតមុខងារមួយហៅថា rateProduct ដែលវាយតម្លៃផលិតផល
b. បង្កើតមុខងារមួយហៅថា averageRating ដែលគណនាការវាយតម្លៃជាមធ្យមនៃផលិតផល
4. បង្កើតមុខងារមួយហៅថា likeProduct។ មុខងារ​នេះ​នឹង​ជួយ​ឱ្យ​ចូលចិត្ត​ផលិតផល​ប្រសិន​បើ​វា​មិន​ត្រូវ​បាន​គេ​ចូល​ចិត្ត​និង​លុប​ការ​ចូលចិត្ត​ប្រសិន​បើ​វា​ត្រូវ​បាន​គេ​ចូល​ចិត្តរួចហើយ​។
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 7](../07_Day_Functions/07_day_functions.md) | [ថ្ងៃទី 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md)

704
Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md
Unescape View File

@ -0,0 +1,704 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: Higher Order Functions</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 8](../08_Day_Objects/08_day_objects.md) | [ថ្ងៃទី 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md)
![ថ្ងៃទី 9](../images/banners/day_1_9.png)
- [ថ្ងៃទី 9](#day-9)
- [Higher Order Function](#higher-order-function)
- [Callback](#callback)
- [ត្រឡប់ function ជាតម្លៃ](#returning-function)
- [ការកំណត់ពេលវេលា](#setting-time)
- [កំណត់ចន្លោះពេលដោយប្រើមុខងារ setInterval](#setting-interval-using-a-setinterval-function)
- [កំណត់ពេលវេលាដោយប្រើ setTimeout](#setting-a-time-using-a-settimeout)
- [Functional Programming](#functional-programming)
- [forEach](#foreach)
- [map](#map)
- [filter](#filter)
- [reduce](#reduce)
- [every](#every)
- [find](#find)
- [findIndex](#findindex)
- [some](#some)
- [sort](#sort)
- [ការតម្រៀបតម្លៃ string](#sorting-string-values)
- [ការតម្រៀបតម្លៃលេខ](#sorting-numeric-values)
- [ការតម្រៀប Object Arrays](#sorting-object-arrays)
- [💻 លំហាត់](#-exercises)
- [លំហាត់៖ កម្រិត ១](#exercises-level-1)
- [លំហាត់៖ កម្រិត ២](#exercises-level-2)
- [លំហាត់៖ កម្រិត ៣](#exercises-level-3)
# ថ្ងៃទី 9
## Higher Order Function
Higher order functions គឺជាអនុគមន៍ដែលយកអនុគមន៍ផ្សេងទៀតជាប៉ារ៉ាម៉ែត្រ ឬត្រឡប់អនុគមន៍ជាតម្លៃ។ អនុគមន៍​ដែល​បាន​បោះ​ជា​ប៉ារ៉ាម៉ែត្រ​ត្រូវ​បាន​ហៅ​ថា​ហៅថា callback។
### Callback
callback គឺជា function ដែលអាចត្រូវបានបញ្ជូនជាប៉ារ៉ាម៉ែត្រទៅ function ផ្សេងទៀត។ សូមមើលឧទាហរណ៍ខាងក្រោម។
```js
// function callback អាចជាឈ្មោះណាមួយ។
const callback = (n) => {
return n ** 2
}
​
// function ដែលយក function ផ្សេងទៀតជា callback
function cube(callback, n) {
return callback(n) * n
}
​
console.log(cube(callback, 3))
```
### ត្រឡប់ function ជាតម្លៃ
Higher order functions ត្រឡប់ function ជាតម្លៃ
​
```js
// Higher order function ត្រឡប់ function ជាតម្លៃ
const higherOrder = n => {
const doSomething = m => {
const doWhatEver = t => {
return 2 * n + 3 * m + t
}
return doWhatEver
}
return doSomething
}
console.log(higherOrder(2)(3)(10))
```
អនុញ្ញាតឱ្យយើងមើលការប្រើ callback function។ ឧទាហរណ៍វិធីសាស្ត្រ _forEach_ ប្រើ callback function។
```js
const numbers = [1, 2, 3, 4, 5]
const sumArray = arr => {
let sum = 0
const callback = function(element) {
sum += element
}
arr.forEach(callback)
return sum
}
console.log(sumArray(numbers))
```
```sh
15
```
ឧទាហរណ៍ខាងលើអាចត្រូវបានធ្វើឱ្យសាមញ្ញដូចខាងក្រោម:
```js
const numbers = [1, 2, 3, 4]
​
const sumArray = arr => {
let sum = 0
arr.forEach(function(element) {
sum += element
})
return sum
}
console.log(sumArray(numbers))
```
```sh
15
```
### ការកំណត់ពេលវេលា
នៅក្នុង JavaScript យើងអាចប្រតិបត្តិសកម្មភាពមួយចំនួនក្នុងចន្លោះពេលជាក់លាក់មួយ ឬយើងអាចកំណត់ពេល (រង់ចាំ) សម្រាប់ពេលខ្លះដើម្បីប្រតិបត្តិសកម្មភាពមួយចំនួន។
- setInterval
- setTimeout
#### កំណត់ចន្លោះពេលដោយប្រើមុខងារ setInterval
នៅក្នុង JavaScript យើងប្រើ higher order function setInterval ដើម្បីធ្វើសកម្មភាពមួយចំនួនជាបន្តបន្ទាប់ក្នុងចន្លោះពេលមួយចំនួន។ វិធីសាស្ត្រសកល setInterval យក callback function និងរយៈពេលជាប៉ារ៉ាម៉ែត្រ។ រយៈពេលគឺគិតជាមិល្លីវិនាទី ហើយ callback នឹងតែងតែត្រូវបានហៅក្នុងចន្លោះពេលនោះ។
```js
// syntax
function callback() {
// code goes here
}
setInterval(callback, duration)
```
```js
function sayHello() {
console.log('Hello')
}
setInterval(sayHello, 1000) // វាបោះពុម្ពជំរាបសួររៀងរាល់វិនាទី 1000ms គឺ 1s
```
#### កំណត់ពេលវេលាដោយប្រើ setTimeout
នៅក្នុង JavaScript យើងប្រើ higher order function setTimeout ដើម្បីប្រតិបត្តិសកម្មភាពមួយចំនួននៅពេលអនាគត។ វិធីសាស្ត្រសកល setTimeout យកមុខងារ callback និងរយៈពេលជាប៉ារ៉ាម៉ែត្រ។ ថិរវេលាគឺគិតជាមិល្លីវិនាទី ហើយការហៅត្រឡប់មកវិញរង់ចាំសម្រាប់ពេលវេលានោះ។
```js
// syntax
function callback() {
// code goes here
}
setTimeout(callback, duration) // រយៈពេលគិតជាមិល្លីវិនាទី
```
```js
function sayHello() {
console.log('Hello')
}
setTimeout(sayHello, 2000)
```
## Functional Programming
ជំនួសឱ្យការសរសេររង្វិលជុំធម្មតា កំណែចុងក្រោយបំផុតនៃ JavaScript បានណែនាំវិធីសាស្រ្តជាច្រើនដែលអាចជួយយើងក្នុងការដោះស្រាយបញ្ហាស្មុគស្មាញ។ រាល់វិធីសាស្រ្តដែលភ្ជាប់មកជាមួយ callback function។ នៅក្នុងផ្នែកនេះ យើងនឹងឃើញ _forEach_, _map_, _filter_, _reduce_, _find_, _every_, _some_, និង _sort_។
### forEach
_forEach_: iterate នូវធាតុអារេ។ យើងប្រើ _forEach_ តែជាមួយអារេ។ វាត្រូវការ callback function ជាមួយធាតុ ប៉ារ៉ាម៉ែត្រសន្ទស្សន៍ និងអារេខ្លួនឯង។ សន្ទស្សន៍ និងអារេជាជម្រើស។
```js
arr.forEach(function (element, index, arr) {
console.log(index, element, arr)
})
// កូដខាងលើអាចត្រូវបានសរសេរដោយប្រើ arrow function
arr.forEach((element, index, arr) => {
console.log(index, element, arr)
})
// កូដខាងលើអាចត្រូវបានសរសេរដោយប្រើ arrow function និងការត្រឡប់មកវិញយ៉ាងច្បាស់
arr.forEach((element, index, arr) => console.log(index, element, arr))
```
```js
let sum = 0;
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num))
console.log(sum)
```
```sh
1
2
3
4
5
```
```js
let sum = 0;
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => sum += num)
console.log(sum)
```
```sh
15
```
```js
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland']
countries.forEach((element) => console.log(element.toUpperCase()))
```
```sh
FINLAND
DENMARK
SWEDEN
NORWAY
ICELAND
```
### map
_map_: iterate នូវធាតុអារេ និងកែប្រែធាតុអារេ។ វាត្រូវការ callback function ជាមួយធាតុ សន្ទស្សន៍ ប៉ារ៉ាម៉ែត្រអារេ ហើយត្រឡប់អារេថ្មី។
```js
const modifiedArray = arr.map(function (element, index, arr) {
return element
})
```
```js
/*Arrow function and explicit return
const modifiedArray = arr.map((element,index) => element);
*/
//ឧទាហរណ៍
const numbers = [1, 2, 3, 4, 5]
const numbersSquare = numbers.map((num) => num * num)
console.log(numbersSquare)
```
```sh
[1, 4, 9, 16, 25]
```
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const namesToUpperCase = names.map((name) => name.toUpperCase())
console.log(namesToUpperCase)
```
```sh
['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK']
```
```js
const countries = [
'Albania',
'Bolivia',
'Canada',
'Denmark',
'Ethiopia',
'Finland',
'Germany',
'Hungary',
'Ireland',
'Japan',
'Kenya',
]
const countriesToUpperCase = countries.map((country) => country.toUpperCase())
console.log(countriesToUpperCase)
/*
// Arrow function
const countriesToUpperCase = countries.map((country) => {
return country.toUpperCase();
})
//Explicit return arrow function
const countriesToUpperCase = countries.map(country => country.toUpperCase());
*/
```
```sh
['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA']
```
```js
const countriesFirstThreeLetters = countries.map((country) =>
country.toUpperCase().slice(0, 3)
)
```
```sh
 ["ALB", "BOL", "CAN", "DEN", "ETH", "FIN", "GER", "HUN", "IRE", "JAP", "KEN"]
```
### filter
_Filter_: ត្រងធាតុដែលបំពេញលក្ខខណ្ឌហើយត្រឡប់អារេថ្មី។
```js
//ត្រងប្រទេសដែលមាន land
const countriesContainingLand = countries.filter((country) =>
country.includes('land')
)
console.log(countriesContainingLand)
```
```sh
['Finland', 'Ireland']
```
```js
const countriesEndsByia = countries.filter((country) => country.endsWith('ia'))
console.log(countriesEndsByia)
```
```sh
['Albania', 'Bolivia','Ethiopia']
```
```js
const countriesHaveFiveLetters = countries.filter(
(country) => country.length === 5
)
console.log(countriesHaveFiveLetters)
```
```sh
['Japan', 'Kenya']
```
```js
const scores = [
{ name: 'Asabeneh', score: 95 },
{ name: 'Lidiya', score: 98 },
{ name: 'Mathias', score: 80 },
{ name: 'Elias', score: 50 },
{ name: 'Martha', score: 85 },
{ name: 'John', score: 100 },
]
const scoresGreaterEighty = scores.filter((score) => score.score > 80)
console.log(scoresGreaterEighty)
```
```sh
[{name: 'Asabeneh', score: 95}, { name: 'Lidiya', score: 98 },{name: 'Martha', score: 85},{name: 'John', score: 100}]
```
### reduce
_reduce_: ប្រើ callback function។ callback function យក accumulator, បច្ចុប្បន្ន និងតម្លៃដំបូងជាជម្រើសជាប៉ារ៉ាម៉ែត្រ ហើយត្រឡប់តម្លៃតែមួយ។ វាគឺជាការអនុវត្តដ៏ល្អក្នុងការកំណត់តម្លៃដំបូងសម្រាប់តម្លៃ accumulator ។ ប្រសិនបើយើងមិនបញ្ជាក់ប៉ារ៉ាម៉ែត្រនេះទេ តាមលំនាំដើម accumulator នឹងទទួលបានអារេ `តម្លៃដំបូង`។ ប្រសិនបើអារេរបស់យើងជា _empty array_ នោះ `Javascript` នឹងបោះកំហុស។
```js
arr.reduce((acc, cur) => {
// ប្រតិបត្តិការមួយចំនួនទៅទីនេះ មុនពេលត្រឡប់តម្លៃ
return
}, initialValue)
```
```js
const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((acc, cur) => acc + cur, 0)
console.log(sum)
```
```js
15
```
### every
_every_: ពិនិត្យមើលថាតើធាតុទាំងអស់ស្រដៀងគ្នានៅក្នុងទិដ្ឋភាពមួយ។ វាត្រឡប់ប៊ូលីន
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const areAllStr = names.every((name) => typeof name === 'string') // តើជា string ទាំងអស់ទេ?
console.log(areAllStr)
```
```sh
true
```
```js
const bools = [true, true, true, true]
const areAllTrue = bools.every((b) => b === true) // តើជា ពិត ទាំងអស់ទេ?
console.log(areAllTrue) // true
```
```sh
true
```
### find
_find_: ត្រឡប់ធាតុទីមួយដែលបំពេញលក្ខខណ្ឌ
```js
const ages = [24, 22, 25, 32, 35, 18]
const age = ages.find((age) => age < 20)
console.log(age)
```
```js
18
```
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const result = names.find((name) => name.length > 7)
console.log(result)
```
```sh
Asabeneh
```
```js
const scores = [
{ name: 'Asabeneh', score: 95 },
{ name: 'Mathias', score: 80 },
{ name: 'Elias', score: 50 },
{ name: 'Martha', score: 85 },
{ name: 'John', score: 100 },
]
const score = scores.find((user) => user.score > 80)
console.log(score)
```
```sh
{ name: "Asabeneh", score: 95 }
```
### findIndex
_findIndex_: ត្រឡប់ទីតាំងនៃធាតុទីមួយដែលបំពេញលក្ខខណ្ឌ
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const ages = [24, 22, 25, 32, 35, 18]
const result = names.findIndex((name) => name.length > 7)
console.log(result) // 0
const age = ages.findIndex((age) => age < 20)
console.log(age) // 5
```
### some
_some_: ពិនិត្យមើលថាតើធាតុមួយចំនួនស្រដៀងគ្នានៅក្នុងទិដ្ឋភាពមួយ។ វាត្រឡប់ប៊ូលីន
```js
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const bools = [true, true, true, true]
const areSomeTrue = bools.some((b) => b === true)
console.log(areSomeTrue) //true
```
```js
const areAllStr = names.some((name) => typeof name === 'number') // តើ string ទាំងអស់ទេ?
console.log(areAllStr) // false
```
### sort
_sort_: method ​តម្រៀប​​ធាតុ​អារេ​តាម​លំដាប់​ឡើង​ឬ​ចុះ។ តាមលំនាំដើម វិធីសាស្ត្រ **_sort()_** តម្រៀបតម្លៃជា string។ វាដំណើរការល្អសម្រាប់ធាតុអារេ string ប៉ុន្តែមិនមែនសម្រាប់លេខទេ។ ប្រសិនបើតម្លៃលេខត្រូវបានតម្រៀបជាខ្សែ ហើយវាផ្តល់ឱ្យយើងនូវលទ្ធផលខុស។ វិធីសាស្ត្រតម្រៀប កែប្រែអារេដើម។ វាត្រូវបានណែនាំឱ្យចម្លងទិន្នន័យដើម មុនពេលអ្នកចាប់ផ្តើមប្រើវិធីសាស្ត្រ _sort_។
#### ការតម្រៀបតម្លៃ string
```js
const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot']
console.log(products.sort()) // ['Apple', 'Carrot', 'Coffee', 'Honey', 'Milk', 'Sugar']
//ឥឡូវនេះអារេផលិតផលដើមក៏ត្រូវបានតម្រៀបផងដែរ។
```
#### ការតម្រៀបតម្លៃលេខ
ដូចដែលអ្នកអាចឃើញនៅក្នុងឧទាហរណ៍ខាងក្រោម 100 បានមកជាលើកដំបូងបន្ទាប់ពីបានតម្រៀបតាមលំដាប់ឡើង។ តម្រៀបបំប្លែងធាតុទៅជាខ្សែអក្សរ ចាប់តាំងពី '100' និងលេខផ្សេងទៀតប្រៀបធៀប 1 ដែលការចាប់ផ្តើមនៃខ្សែអក្សរ '100' ក្លាយជាតូចបំផុត។ ដើម្បីជៀសវាងបញ្ហានេះ យើងប្រើ callback functio ប្រៀបធៀបនៅក្នុងវិធីតម្រៀប ដែលផ្តល់លទ្ធផលអវិជ្ជមាន សូន្យ ឬវិជ្ជមាន។
```js
const numbers = [9.81, 3.14, 100, 37]
// ការប្រើ sort method ដើម្បីតម្រៀបធាតុលេខផ្តល់លទ្ធផលខុស។ មើល​ខាង​ក្រោម
console.log(numbers.sort()) //[100, 3.14, 37, 9.81]
numbers.sort(function (a, b) {
return a - b
})
console.log(numbers) // [3.14, 9.81, 37, 100]
numbers.sort(function (a, b) {
return b - a
})
console.log(numbers) //[100, 37, 9.81, 3.14]
```
#### ការតម្រៀប Object Array
នៅពេលណាដែលយើងតម្រៀប object ក្នុងអារេមួយ យើងប្រើ key ដើម្បីប្រៀបធៀប។ ចូរយើងមើលឧទាហរណ៍ខាងក្រោម។
```js
objArr.sort(function (a, b) {
if (a.key < b.key) return -1
if (a.key > b.key) return 1
return 0
})
// or
objArr.sort(function (a, b) {
if (a['key'] < b['key']) return -1
if (a['key'] > b['key']) return 1
return 0
})
const users = [
{ name: 'Asabeneh', age: 150 },
{ name: 'Brook', age: 50 },
{ name: 'Eyob', age: 100 },
{ name: 'Elias', age: 22 },
]
users.sort((a, b) => {
if (a.age < b.age) return -1
if (a.age > b.age) return 1
return 0
})
console.log(users) // តម្រៀបឡើង
// [{…}, {…}, {…}, {…}]
```
🌕 អ្នក​កំពុង​ធ្វើ​បាន​ល្អ​។​ កុំ​បោះបង់​ចោល​ព្រោះ​រឿង​អស្ចារ្យ​ត្រូវ​ការ​ពេល​វេលា។ អ្នកទើបតែបានបញ្ចប់ការប្រកួតថ្ងៃទី 9 ហើយអ្នកបានឈាន 9 ជំហាន ឆ្ពោះទៅរកភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## 💻 លំហាត់
### លំហាត់៖ កម្រិត ១
```js
const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand']
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const products = [
{ product: 'banana', price: 3 },
{ product: 'mango', price: 6 },
{ product: 'potato', price: ' ' },
{ product: 'avocado', price: 8 },
{ product: 'coffee', price: 10 },
{ product: 'tea', price: '' },
]
```
1. ពន្យល់ពីភាពខុសគ្នារវាង **_forEach map filter reduce**។
2. កំណត់ callback function មុនពេលដែលអ្នកប្រើវានៅក្នុង forEach, map, filter or reduce។
3. ប្រើ **_forEach_** ដើម្បី console.log ប្រទេសនីមួយៗក្នុងបណ្តាប្រទេសអារេ។
4. ប្រើ **_forEach_** ដើម្បី console.log ឈ្មោះនីមួយៗក្នុងអារេឈ្មោះ។
5. ប្រើ **_forEach_** ដើម្បី console.log លេខនីមួយៗក្នុងអារេលេខ។
6. ប្រើ **_map_** ដើម្បីបង្កើតអារេថ្មីដោយផ្លាស់ប្តូរប្រទេសនីមួយៗទៅជាអក្សរធំក្នុងប្រទេសអារេ។
7. ប្រើ **_map_** ដើម្បីបង្កើតអារេនៃប្រវែងប្រទេសពីអារេប្រទេស។
8. ប្រើ **_map_** ដើម្បីបង្កើតអារេថ្មីដោយផ្លាស់ប្តូរលេខនីមួយៗទៅជាការ៉េក្នុងអារេលេខ
9. ប្រើ **_map_** ដើម្បីប្តូរឈ្មោះនីមួយៗទៅជាអក្សរធំក្នុងអារេឈ្មោះ
10. ប្រើ **_map_** ដើម្បីគូសផែនទីអារេផលិតផលទៅនឹងតម្លៃដែលត្រូវគ្នារបស់វា។
11. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលមាន **_land_**។
12. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលមានតួអក្សរប្រាំមួយ។
13. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលមានអក្សរប្រាំមួយ និងច្រើនទៀតនៅក្នុងអារេប្រទេស។
14. ប្រើ **_filter_** ដើម្បីត្រងប្រទេសដែលចាប់ផ្តើមដោយ 'E';
15. ប្រើ **_filter_** ដើម្បីត្រងតែតម្លៃដែលមានតម្លៃប៉ុណ្ណោះ។
16. ប្រកាសមុខងារមួយហៅថា getStringLists ដែលយកអារេជាប៉ារ៉ាម៉ែត្រ ហើយបន្ទាប់មកត្រឡប់អារេតែជាមួយធាតុខ្សែអក្សរប៉ុណ្ណោះ។
17. ប្រើ **_reduce_** ដើម្បីបូកសរុបលេខទាំងអស់ក្នុងអារេលេខ។
18. ប្រើ **_reduce_** ដើម្បីភ្ជាប់ប្រទេសទាំងអស់ និងបង្កើតប្រយោគនេះ៖ **_Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries_**
19. ពន្យល់ពីភាពខុសគ្នារវាង **_some_** និង **_every_**
20. ប្រើ **_some_** ដើម្បីពិនិត្យមើលថាតើប្រវែងឈ្មោះខ្លះធំជាងប្រាំពីរនៅក្នុងអារេឈ្មោះ
21. ប្រើ **_every_** ដើម្បីពិនិត្យមើលថាតើប្រទេសទាំងអស់មានពាក្យថា land ឬអត់
22. ពន្យល់ពីភាពខុសគ្នារវាង **_find_** និង **_findIndex_** ។
23. ប្រើ **_find_** ដើម្បីស្វែងរកប្រទេសដំបូងដែលមានអក្សរតែប្រាំមួយក្នុងប្រទេសអារេ
24. ប្រើ **_findIndex_** ដើម្បីស្វែងរកទីតាំងនៃប្រទេសដំបូងដែលមានអក្សរតែប្រាំមួយនៅក្នុងបណ្តាប្រទេសអារេ
25. ប្រើ **_findIndex_** ដើម្បីស្វែងរកទីតាំងរបស់ **_Norway_** ប្រសិនបើវាមិនមាននៅក្នុងអារេ អ្នកនឹងទទួលបាន -1 ។
26. ប្រើ **_findIndex_** ដើម្បីស្វែងរកទីតាំងរបស់ **_Russia_** ប្រសិនបើវាមិនមាននៅក្នុងអារេ អ្នកនឹងទទួលបាន -1 ។
### លំហាត់៖ កម្រិត ២
1. ស្វែងរកតម្លៃសរុបនៃផលិតផលដោយដាក់ខ្សែសង្វាក់អារេពីរ ឬច្រើន (ឧ. arr.map(callback).filter(callback).reduce(callback))
1. ស្វែងរកផលបូកនៃតម្លៃផលិតផលដោយប្រើតែកាត់បន្ថយ(callback)
1. ប្រកាសមុខងារមួយហៅថា **_categorizeCountries_** ដែលត្រឡប់អារេនៃប្រទេសដែលមានលំនាំទូទៅមួយចំនួន (អ្នករកឃើញអារេប្រទេសនៅក្នុងឃ្លាំងនេះជា countries.js(ឧ. 'land', 'ia', 'island','stan' ))
1. បង្កើតមុខងារដែលត្រឡប់អារេនៃវត្ថុដែលជាអក្សរ និងចំនួនដងដែលអក្សរប្រើដើម្បីចាប់ផ្តើមជាមួយឈ្មោះប្រទេសមួយ។
1. ប្រកាសមុខងារ **_getFirstTenCountries_** ហើយត្រឡប់អារេនៃដប់ប្រទេស។ ប្រើកម្មវិធីមុខងារផ្សេងៗគ្នា ដើម្បីដំណើរការលើអារេ country.js
1. ប្រកាសមុខងារ **_getLastTenCountries_** ដែលត្រឡប់ប្រទេសទាំងដប់ចុងក្រោយនៅក្នុងអារេប្រទេស។
1. ស្វែងយល់ថាតើ _letter_ មួយណាត្រូវបានប្រើប្រាស់ច្រើនដង ជាដំបូងសម្រាប់ឈ្មោះប្រទេសពីអារេប្រទេស (ឧ. ហ្វាំងឡង់ ហ្វីជី បារាំង។ល។)
### លំហាត់៖ កម្រិត ៣
1. ប្រើព័ត៌មានប្រទេសនៅក្នុងថតទិន្នន័យ។ តម្រៀបប្រទេសតាម name, capital, និង population
1. \*\*\* ស្វែងរក 10 ភាសាដែលនិយាយច្រើនបំផុត:
````js
// លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ
console.log(mostSpokenLanguages(countries, 10))
[
{country: 'English',count:91},
{country: 'French',count:45},
{country: 'Arabic',count:25},
{country: 'Spanish',count:24},
{country:'Russian',count:9},
{country:'Portuguese', count:9},
{country:'Dutch',count:8},
{country:'German',count:7},
{country:'Chinese',count:5},
{country:'Swahili',count:4}
]
// លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ
console.log(mostSpokenLanguages(countries, 3))
[
{country: 'English',count: 91},
{country: 'French',count: 45},
{country: 'Arabic',count: 25},
]```
````
2. \*\*\* ប្រើឯកសារ country_data.js បង្កើតមុខងារដែលបង្កើតប្រទេសចំនួនដប់ដែលមានប្រជាជនច្រើនជាងគេ
````js
console.log(mostPopulatedCountries(countries, 10))
[
{country: 'China', population: 1377422166},
{country: 'India', population: 1295210000},
{country: 'United States of America', population: 323947000},
{country: 'Indonesia', population: 258705000},
{country: 'Brazil', population: 206135893},
{country: 'Pakistan', population: 194125062},
{country: 'Nigeria', population: 186988000},
{country: 'Bangladesh', population: 161006790},
{country: 'Russian Federation', population: 146599183},
{country: 'Japan', population: 126960000}
]
console.log(mostPopulatedCountries(countries, 3))
[
{country: 'China', population: 1377422166},
{country: 'India', population: 1295210000},
{country: 'United States of America', population: 323947000}
]
```
````
3. \*\*\* ព្យាយាមបង្កើតកម្មវិធីដែលគណនារង្វាស់នៃទំនោរកណ្តាលនៃគំរូ (mean, median, mode) និងរង្វាស់នៃភាពប្រែប្រួល (range, variance, standard deviation)។ បន្ថែមពីលើវិធានការទាំងនោះ រកឃើញ min, max, count, percentile, និង frequency distributionនៃគំរូ។ អ្នកអាចបង្កើតវត្ថុមួយហៅថាស្ថិតិ និងបង្កើតមុខងារទាំងអស់ដែលធ្វើការគណនាស្ថិតិជាវិធីសាស្ត្រសម្រាប់វត្ថុស្ថិតិ។ សូមពិនិត្យមើលលទ្ធផលខាងក្រោម។
```js
const ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26]
console.log('Count:', statistics.count()) // 25
console.log('Sum: ', statistics.sum()) // 744
console.log('Min: ', statistics.min()) // 24
console.log('Max: ', statistics.max()) // 38
console.log('Range: ', statistics.range()) // 14
console.log('Mean: ', statistics.mean()) // 30
console.log('Median: ',statistics.median()) // 29
console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5}
console.log('Variance: ',statistics.var()) // 17.5
console.log('Standard Deviation: ', statistics.std()) // 4.2
console.log('Variance: ',statistics.var()) // 17.5
console.log('Frequency Distribution: ',statistics.freqDist()) # [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]
```
```sh
console.log(statistics.describe())
Count: 25
Sum: 744
Min: 24
Max: 38
Range: 14
Mean: 30
Median: 29
Mode: (26, 5)
Variance: 17.5
Standard Deviation: 4.2
Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]
```
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 8](../08_Day_Objects/08_day_objects.md) | [ថ្ងៃទី 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md)

440
Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md
Unescape View File

@ -0,0 +1,440 @@
<div align="center">
<h1> 30 ថ្ងៃនៃ JavaScript: Sets and Maps</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> ខែមករា ឆ្នាំ ២០២០</small>
</sub>
</div>
[<< ថ្ងៃទី 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [ថ្ងៃទី 11>>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md)
![ថ្ងៃទី 10](../images/banners/day_1_10.png)
- [ថ្ងៃទី 10](#day-10)
- [Set](#set)
- [ការបង្កើតសំណុំទទេ](#creating-an-empty-set)
- [ការបង្កើតសំណុំពីអារេ](#creating-set-from-array)
- [ការបន្ថែមធាតុទៅសំណុំ](#adding-an-element-to-a-set)
- [ការលុបធាតុពីសំណុំ](#deleting-an-element-a-set)
- [ពិនិត្យធាតុនៅក្នុងសំណុំ](#checking-an-element-in-the-set)
- [ការរំលាយសំណុំ](#clearing-the-set)
- [ប្រជុំនៃសំណុំ](#union-of-sets)
- [ប្រសព្វនៃសំណុំ](#intersection-of-sets)
- [ភាពខុសគ្នានៃសំណុំ](#difference-of-sets)
- [Map](#map)
- [ការបង្កើត map ទទេ](#creating-an-empty-map)
- [ការបង្កើត map ពីអារេ](#creating-an-map-from-array)
- [ការបន្ថែមតម្លៃទៅ map](#adding-values-to-the-map)
- [ការទាញយកតម្លៃពី map](#getting-a-value-from-map)
- [ពិនិត្យ​មើល key ក្នុង​ map](#checking-key-in-map)
- [លំហាត់](#exercises)
- [លំហាត់៖ កម្រិត ១](#exerciseslevel-1)
- [លំហាត់៖ កម្រិត ២](#exerciseslevel-2)
- [លំហាត់៖ កម្រិត ៣](#exerciseslevel-3)
# ថ្ងៃទី 10
## Set
សំណុំគឺជាបណ្តុំនៃធាតុ។ សំណុំអាចមានធាតុតែមួយគត់។
ចូរយើងមើលពីរបៀបបង្កើតសំណុំនៅក្នុងផ្នែកខាងក្រោម។
### ការបង្កើតសំណុំទទេ
```js
const companies = new Set()
console.log(companies)
```
```sh
Set(0) {}
```
### ការបង្កើតសំណុំពីអារេ
```js
const languages = [
'English',
'Finnish',
'English',
'French',
'Spanish',
'English',
'French',
]
const setOfLanguages = new Set(languages)
console.log(setOfLanguages)
```
```sh
Set(4) {"English", "Finnish", "French", "Spanish"}
```
Set គឺជាវត្ថុដែលអាច iterate បាន ហើយយើងអាច iterate តាមរយៈធាតុនីមួយៗ។
```js
const languages = [
'English',
'Finnish',
'English',
'French',
'Spanish',
'English',
'French',
]
const setOfLanguages = new Set(languages)
for (const language of setOfLanguages) {
console.log(language)
}
```
```sh
English
Finnish
French
Spanish
```
### ការបន្ថែមធាតុទៅសំណុំ
```js
const companies = new Set() // បង្កើតសំណុំទទេ
console.log(companies.size) // 0
companies.add('Google') // បន្ថែមធាតុទៅសំណុំ
companies.add('Facebook')
companies.add('Amazon')
companies.add('Oracle')
companies.add('Microsoft')
console.log(companies.size) // 5 ធាតុនៅក្នុងសំណុំ
console.log(companies)
```
```sh
Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"}
```
យើងក៏អាចប្រើ loop ដើម្បីបន្ថែមធាតុទៅសំណុំមួយ។
```js
const companies = ['Google', 'Facebook', 'Amazon', 'Oracle', 'Microsoft']
setOfCompanies = new Set()
for (const company of companies) {
setOfCompanies.add(company)
}
```
```sh
Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"}
```
### ការលុបធាតុមួយឈុត
យើងអាចលុបធាតុចេញពីសំណុំដោយប្រើ delete method។
```js
console.log(companies.delete('Google'))
console.log(companies.size) // 4 ធាតុដែលនៅសល់ក្នុងឈុត
```
### ពិនិត្យធាតុនៅក្នុងសំណុំ
method នេះអាចជួយឱ្យដឹងថាតើមានធាតុជាក់លាក់ណាមួយនៅក្នុងសំណុំមួយ។
```js
console.log(companies.has('Apple')) // false
console.log(companies.has('Facebook')) // true
```
### ការរំលាយសំណុំ
វាដកធាតុទាំងអស់ចេញពីសំណុំ។
```js
companies.clear()
console.log(companies)
```
```sh
Set(0) {}
```
សូមមើលឧទាហរណ៍ខាងក្រោមដើម្បីរៀនពីរបៀបប្រើសំណុំ។
```js
const languages = [
'English',
'Finnish',
'English',
'French',
'Spanish',
'English',
'French',
]
const langSet = new Set(languages)
console.log(langSet) // Set(4) {"English", "Finnish", "French", "Spanish"}
console.log(langSet.size) // 4
const counts = []
const count = {}
for (const l of langSet) {
const filteredLang = languages.filter((lng) => lng === l)
console.log(filteredLang) // ["English", "English", "English"]
counts.push({ lang: l, count: filteredLang.length })
}
console.log(counts)
```
```js
[
{ lang: 'English', count: 3 },
{ lang: 'Finnish', count: 1 },
{ lang: 'French', count: 2 },
{ lang: 'Spanish', count: 1 },
]
```
ករណីប្រើប្រាស់ផ្សេងទៀតនៃសំណុំ។ ឧទាហរណ៍ដើម្បីរាប់ធាតុតែមួយគត់នៅក្នុងអារេមួយ។
```js
const numbers = [5, 3, 2, 5, 5, 9, 4, 5]
const setOfNumbers = new Set(numbers)
console.log(setOfNumbers)
```
```sh
Set(5) {5, 3, 2, 9, 4}
```
### ប្រជុំនៃសំណុំ
ដើម្បីស្វែងរកប្រជុំនៃពីរសំណុំយើងអាចប្រើ spread operator។ ចូរស្វែងរកប្រជុំនៃសំណុំ A និង សំណុំ B (A U B)
```js
let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]
let c = [...a, ...b]
let A = new Set(a)
let B = new Set(b)
let C = new Set(c)
console.log(C)
```
```sh
Set(6) {1, 2, 3, 4, 5,6}
```
### ប្រសព្វនៃសំណុំ
ដើម្បីស្វែងរកចំនុចប្រសព្វនៃសំណុំពីរអាចត្រូវបានសម្រេចដោយប្រើ filter។ ចូរស្វែងរកចំនុចប្រសព្វនៃសំណុំ A និងកំណត់ B (A ∩ B)
```js
let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]
let A = new Set(a)
let B = new Set(b)
let c = a.filter((num) => B.has(num))
let C = new Set(c)
console.log(C)
```
```sh
Set(3) {3, 4, 5}
```
### ភាពខុសគ្នានៃសំណុំ
ដើម្បីស្វែងរកភាពខុសគ្នារវាងសំណុំពីរអាចត្រូវបានសម្រេចដោយប្រើ filter។ ចូរស្វែងរកភាពខុសគ្នានៃសំណុំ A និងសំណុំ B (A \ B)
```js
let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]
let A = new Set(a)
let B = new Set(b)
let c = a.filter((num) => !B.has(num))
let C = new Set(c)
console.log(C)
```
```sh
Set(2) {1, 2}
```
## Map
### ការបង្កើត map ទទេ
```js
const map = new Map()
console.log(map)
```
```sh
Map(0) {}
```
### ការបង្កើត map ពីអារេ
```js
countries = [
['Finland', 'Helsinki'],
['Sweden', 'Stockholm'],
['Norway', 'Oslo'],
]
const map = new Map(countries)
console.log(map)
console.log(map.size)
```
```sh
Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"}
3
```
### ការបន្ថែមតម្លៃទៅ map
```js
const countriesMap = new Map()
console.log(countriesMap.size) // 0
countriesMap.set('Finland', 'Helsinki')
countriesMap.set('Sweden', 'Stockholm')
countriesMap.set('Norway', 'Oslo')
console.log(countriesMap)
console.log(countriesMap.size)
```
```sh
Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"}
3
```
### ការទាញយកតម្លៃពី map
```js
console.log(countriesMap.get('Finland'))
```
```sh
Helsinki
```
### ​ពិនិត្យ​មើល​ key ក្នុង​ map
ពិនិត្យមើលថាតើ key មាននៅក្នុង map ដោយប្រើវិធីសាស្ត្រ _has_ ។ វាត្រឡប់ _true_ ឬ _false_ ។
```js
console.log(countriesMap.has('Finland'))
```
```sh
true
```
ទទួលបានតម្លៃទាំងអស់ពីផែនទីដោយប្រើ loop
```js
for (const country of countriesMap) {
console.log(country)
}
```
```sh
(2) ["Finland", "Helsinki"]
(2) ["Sweden", "Stockholm"]
(2) ["Norway", "Oslo"]
```
```js
for (const [country, city] of countriesMap){
console.log(country, city)
}
```
```sh
Finland Helsinki
Sweden Stockholm
Norway Oslo
```
🌕 អ្នក​បាន​បង្កើត​ព្រឹត្តិការណ៍​ដ៏​ធំ​មួយ អ្នក​មិន​អាច​ឈប់​បាន​ទេ។ បន្ត​ទៀត! អ្នកទើបតែបានបញ្ចប់ challenge 10 ថ្ងៃ ហើយអ្នកបានឈាន 10 ជំហានឆ្ពោះកាន់ភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
## លំហាត់
### លំហាត់៖ កម្រិត ១
```js
const a = [4, 5, 8, 9]
const b = [3, 4, 5, 7]
const countries = ['Finland', 'Sweden', 'Norway']
```
1. បង្កើតសំណុំទទេ
2. បង្កើតសំណុំដែលមាន 0 ទៅ 10 ដោយប្រើរង្វិលជុំ
3. យកធាតុចេញពីសំណុំ
4. ជម្រះសំណុំមួយ។
5. បង្កើតសំណុំនៃធាតុ 5 string ពីអារេ
6. បង្កើត map នៃប្រទេស និងចំនួនតួអក្សរនៃប្រទេសមួយ។
### លំហាត់៖ កម្រិត ២
1. ស្វែងរក a ប្រជុំ b
2. ស្វែងរក a ប្រសព្វ b
3. ស្វែងរក a ជាមួយ b
### លំហាត់៖ កម្រិត ៣
1. តើមានភាសាប៉ុន្មាននៅក្នុងឯកសារ object country
1. \*\*\* ប្រើទិន្នន័យប្រទេសដើម្បីស្វែងរក 10 ភាសានិយាយច្រើនបំផុត:
```js
// លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ
console.log(mostSpokenLanguages(countries, 10))
[
{ English: 91 },
{ French: 45 },
{ Arabic: 25 },
{ Spanish: 24 },
{ Russian: 9 },
{ Portuguese: 9 },
{ Dutch: 8 },
{ German: 7 },
{ Chinese: 5 },
{ Swahili: 4 },
{ Serbian: 4 }
]
// លទ្ធផលរបស់អ្នកគួរតែមើលទៅដូចនេះ
console.log(mostSpokenLanguages(countries, 3))
[
{English:91},
{French:45},
{Arabic:25}
]
```
🎉 អបអរសាទរ ! 🎉
[<< ថ្ងៃទី 9](../09_Day_Higher_order_functions/09_day_higher_order_functions.md) | [ថ្ងៃទី 11 >>](../11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md)

BIN
Khmer/images/30DaysOfJavaScript.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
Khmer/images/adding_project_to_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
Khmer/images/arithmetic.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

BIN
Khmer/images/array_index.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Khmer/images/assignment_operators.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
Khmer/images/banners/Day -1 – 31.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/banners/day_1_10.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/banners/day_1_11.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
Khmer/images/banners/day_1_12.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/banners/day_1_13.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_14.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/banners/day_1_15.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/banners/day_1_16.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_17.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/banners/day_1_18.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_19.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_20.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_21.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/banners/day_1_22.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_23.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_24.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_25.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_26.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_27.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_28.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_29.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_30.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
Khmer/images/banners/day_1_8.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/banners/day_1_9.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
Khmer/images/comparison_operators.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
Khmer/images/console_log_multipl_arguments.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

BIN
Khmer/images/date_time_object.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
Khmer/images/day_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
Khmer/images/day_1_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
Khmer/images/download_node.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
Khmer/images/google_chrome.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
Khmer/images/install_node.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
Khmer/images/js_code_on_chrome_console.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
Khmer/images/js_code_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
Khmer/images/launched_on_new_tab.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
Khmer/images/local_storage.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
Khmer/images/multiple_script.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
Khmer/images/opening_chrome_console_shortcut.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
Khmer/images/opening_developer_tool.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
Khmer/images/opening_project_on_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
Khmer/images/projects/congratulations.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
Khmer/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
Khmer/images/projects/dom_min_project_bar_graph_day_5.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
Khmer/images/projects/dom_min_project_bar_graph_day_5.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
Khmer/images/projects/dom_min_project_challenge_info_day_1.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 KiB

BIN
Khmer/images/projects/dom_min_project_challenge_info_day_1.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
Khmer/images/projects/dom_min_project_countries_aray_day_2.2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 866 KiB

BIN
Khmer/images/projects/dom_min_project_day_7.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
Khmer/images/projects/dom_min_project_day_number_generators_2.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

BIN
Khmer/images/projects/dom_min_project_keycode_day_3.2.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
Khmer/images/projects/dom_min_project_number_generator_day_3.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
Khmer/images/projects/dom_min_project_solar_system_day_4.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
Khmer/images/projects/dom_min_project_solar_system_day_4.1.mkv
View File

Binary file not shown.

BIN
Khmer/images/projects/dom_min_project_solar_system_day_4.1.mp4
View File

Binary file not shown.

BIN
Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 KiB

BIN
Khmer/images/projects/dom_mini_project_countries_day_6.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 MiB

BIN
Khmer/images/projects/dom_mini_project_countries_object_day_10.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

BIN
Khmer/images/projects/dom_mini_project_form_validation_day_10.2.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
Khmer/images/projects/dom_mini_project_form_validation_day_10.2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 KiB

BIN
Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
Khmer/images/projects/dom_mini_project_slider_day_7.1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
Khmer/images/raising_syntax_error.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 KiB

BIN
Khmer/images/regex.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
Khmer/images/running_script.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 335 KiB

BIN
Khmer/images/scripts_on_vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

BIN
Khmer/images/string_indexes.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
Khmer/images/vscode.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
Khmer/images/vscode_ui.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

BIN
Khmer/images/web_storage.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB

697
Khmer/readMe.md
Unescape View File

@ -0,0 +1,697 @@
# 30 ថ្ងៃនៃ Javascript
| # ថ្ងៃ | ប្រធានបទ |
| ------ | :--------------------------------------------------------------------------------------------------------------------------------------------------: |
| 01 | [សេចក្តីផ្តើម](./readMe.md) |
| 02 | [ប្រភេទទិន្នន័យ](./02_Day_Data_types/02_day_data_types.md) |
| 03 | [Booleans, ប្រមាណវិធី, កាលបរិច្ឆេទ](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) |
| 04 | [លក្ខខណ្ឌ](./04_Day_Conditionals/04_day_conditionals.md) |
| 05 | [Arrays](./05_Day_Arrays/05_day_arrays.md) |
| 06 | [Loops](./06_Day_Loops/06_day_loops.md) |
| 07 | [អនុគមន៍](./07_Day_Functions/07_day_functions.md) |
| 08 | [Objects](./08_Day_Objects/08_day_objects.md) |
| 09 | [Higher Order Functions](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) |
| 10 | [Sets and Maps](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) |
| 11 | [Destructuring and Spreading](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) |
| 12 | [Regular Expressions](./12_Day_Regular_expressions/12_day_regular_expressions.md) |
| 13 | [Console Object Methods](./13_Day_Console_object_methods/13_day_console_object_methods.md) |
| 14 | [ការគ្រប់គ្រង Error](./14_Day_Error_handling/14_day_error_handling.md) |
| 15 | [Classes](./15_Day_Classes/15_day_classes.md) |
| 16 | [JSON](./16_Day_JSON/16_day_json.md) |
| 17 | [Web Storages](./17_Day_Web_storages/17_day_web_storages.md) |
| 18 | [Promises](./18_Day_Promises/18_day_promises.md) |
| 19 | [Closure](./19_Day_Closures/19_day_closures.md) |
| 20 | [ការសរសេរ Clean Code](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) |
| 21 | [DOM](./21_Day_DOM/21_day_dom.md) |
| 22 | [ការរៀបចំ DOM Object](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) |
| 23 | [Event Listeners](./23_Day_Event_listeners/23_day_event_listeners.md) |
| 24 | [គម្រោងខ្នាតតូច: Solar System](./24_Day_Project_solar_system/24_day_project_solar_system.md) |
| 25 | [គម្រោងខ្នាតតូច: World Countries Data Visualization 1](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) |
| 26 | [គម្រោងខ្នាតតូច: World Countries Data Visualization 2](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) |
| 27 | [គម្រោងខ្នាតតូច: Portfolio](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) |
| 28 | [គម្រោងខ្នាតតូច: Leaderboard](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) |
| 29 | [គម្រោងខ្នាតតូច: Animating characters](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) |
| 30 | [គម្រោងបញ្ចប់](./30_Day_Mini_project_final/30_day_mini_project_final.md) |
🧡🧡🧡 រីករាយក្នុងការសរសេរកូដ 🧡🧡🧡
<div>
<small>គាំទ្រ<strong>អ្នកនិពន្ធ</strong>ដើម្បីទទួលបានឯកសារសិក្សាបន្ថែមទៀត</small> <br />
<a href = "https://www.paypal.me/asabeneh"><img src='../images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
</div>
<div align="center">
<h1>30 ថ្ងៃនៃ JavaScript៖ ការណែនាំ</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>អ្នកនិពន្ធ:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> មករា, ២០២០</small>
</sub>
<div>
🇬🇧 [English](./readMe.md)
🇪🇸 [Spanish](./Spanish/readme.md)
🇮🇹 [Italian](./Italian/readMe.md)
🇷🇺 [Russian](./RU/README.md)
🇹🇷 [Turkish](./Turkish/readMe.md)
🇦🇿 [Azerbaijan](./Azerbaijani/readMe.md)
🇰🇷 [Korean](./Korea/README.md)
🇻🇳 [Vietnamese](./Vietnamese/README.md)
🇵🇱 [Polish](./Polish/readMe.md)
🇧🇷 [Portuguese](./Portuguese/readMe.md)
🇰🇭 [Khmer](./Khmer/readMe.md)
</div>
</div>
</div>
[ថ្ងៃទី ២ >>](./02_Day_Data_types/02_day_data_types.md)
![៣០ ថ្ងៃនៃ JavaScript](./images/day_1_1.png)
- [៣០ ថ្ងៃនៃ JavaScript](#30-days-of-javascript)
- [📔 ថ្ងៃទី ១](#-day-1)
- [សេចក្តីផ្តើម](#introduction)
- [តម្រូវការ](#requirements)
- [ការរៀបចំ](#setup)
- [ដំឡើង Node.js](#install-nodejs)
- [Browser](#browser)
- [ដំឡើង Google Chrome](#installing-google-chrome)
- [ការបើក Google Chrome Console](#opening-google-chrome-console)
- [ការសរសេរកូដនៅលើ Browser Console](#writing-code-on-browser-console)
- [Console.log](#consolelog)
- [Console.log ជាមួយ Arguments ច្រើន](#consolelog-with-multiple-arguments)
- [Comments](#comments)
- [Syntax](#syntax)
- [Arithmetics](#arithmetics)
- [កម្មវិធីនិពន្ធកូដ](#code-editor)
- [ការដំឡើង Visual Studio Code](#installing-visual-studio-code)
- [របៀបប្រើ Visual Studio Code](#how-to-use-visual-studio-code)
- [ការបន្ថែម JavaScript ទៅគេហទំព័រ](#adding-javascript-to-a-web-page)
- [Inline Script](#inline-script)
- [Internal Script](#internal-script)
- [External Script](#external-script)
- [External Scripts ច្រើន](#multiple-external-scripts)
- [ការណែនាំអំពីប្រភេទទិន្នន័យ](#introduction-to-data-types)
- [Numbers](#numbers)
- [Strings](#strings)
- [Booleans](#booleans)
- [Undefined](#undefined)
- [Null](#null)
- [ការពិនិត្យប្រភេទទិន្នន័យ](#checking-data-types)
- [Comments ម្តងទៀត](#comments-again)
- [Variables](#variables)
- [💻 លំហាត់សម្រាប់ថ្ងៃទី ១](#-day-1-exercises)
# 📔 ថ្ងៃទី ១
## សេចក្តីផ្តើម
សូមអបអរសាទរលើការសម្រេចចិត្តចូលរួមក្នុង challenge សរសេរកម្មវិធី JavaScript រយៈពេល 30 ថ្ងៃ។ នៅក្នុង challenge នេះអ្នកនឹងរៀនអ្វីគ្រប់យ៉ាងដែលអ្នកត្រូវការដើម្បីក្លាយជាអ្នកសរសេរកម្មវិធី JavaScript។ ហើយនៅចុងបញ្ចប់នៃ challenge អ្នកនឹងទទួលបានវិញ្ញាបនបត្របញ្ចប់ challenge 30DaysOfJavaScript ។ ក្នុងករណីដែលអ្នកត្រូវការជំនួយ ឬប្រសិនបើអ្នកចង់ជួយអ្នកដទៃ អ្នកអាចចូលរួមជាមួយ [telegram group](https://t.me/ThirtyDaysOfJavaScript).
**30DaysOfJavaScript** challenge គឺជាការណែនាំសម្រាប់អ្នកចាប់ផ្តើមដំបូង និង កម្រិតខ្ពស់។ សូមស្វាគមន៍មកកាន់ JavaScript ។ JavaScript គឺជាភាសានៃ web។ ខ្ញុំរីករាយក្នុងការប្រើ និងបង្រៀន JavaScript ហើយខ្ញុំសង្ឃឹមថាអ្នកនឹងរីករាយផងដែរ។
ក្នុង​ chllenge JavaScript មួយ​នេះ អ្នក​នឹង​រៀន JavaScript ដែល​ជា​ភាសា​សរសេរ​កម្មវិធី​ពេញ​និយម​បំផុត​ក្នុង​ប្រវត្តិសាស្ត្រ​មនុស្សជាតិ។
JavaScript ត្រូវ​បាន​ប្រើ ដើម្បី​បន្ថែម​ភាពរស់រវើក​ទៅ​គេហទំព័រ​ ដើម្បី​បង្កើត​កម្មវិធី​ទូរសព្ទ​ កម្មវិធី​កុំព្យូទ័រ​ និង ហ្គេម​ ហើយ​បច្ចុប្បន្ន​ JavaScript ត្រូវ​បាន​ប្រើ​សម្រាប់​ server-side programming, ​ machine learning និង AI
**_JavaScript (JS)_** បានកើនឡើងប្រជាប្រិយភាពក្នុងរយៈពេលប៉ុន្មានឆ្នាំចុងក្រោយនេះ ហើយបានឈានមុខគេសម្រាប់ដប់ឆ្នាំចុងក្រោយនេះ និងជាភាសាដែលប្រើច្រើនបំផុតនៅលើ
GitHub ។
challenge នេះគឺមានភាពងាយស្រួលក្នុងការអានប៉ុន្តែវាក៏ទាមទារពេលច្រើនដែរ។ អ្នកត្រូវបែងចែកពេលវេលាច្រើនដើម្បីបញ្ចប់ challenge នេះ។ ប្រសិនបើអ្នកជាអ្នកសិក្សាដែលចូលចិត្តមើលរូបភាព អ្នកអាចទទួលបានមេរៀនវីដេអូនៅលើ <a href="https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw"> Washera</a> YouTube channel។ ជាវប៉ុស្តិ៍ បញ្ចេញមតិ និងសួរសំណួរនៅលើវីដេអូ YouTube ហើយសកម្មរបស់អ្នកនឹងឲអ្នកនិពន្ធចាប់អារម្មណ៏។
អ្នកនិពន្ធចង់បានយោបល់របស់អ្នកអំពី challenge នេះហើយអ្នកអាចបញ្ចេញយោបល់តាម [link](https://testimonial-vdzd.onrender.com//)
## តម្រូវការ
challenge នេះមិនត្រូវការឲអ្នកមានចំណេះដឹងលើការសរសេរកូដជាមុនទេ។ អ្នកត្រូវការតែ៖
1. ទឹកចិត្ត
2. កុំព្យូទ័រ
3. អ៊ីនធឺណិត
4. Browser
5. កម្មវិធីកែកូដ
## ការរៀបចំ
ខ្ញុំជឿថាអ្នកមានទឹកចិត្ត និងបំណងប្រាថ្នាដ៏ខ្លាំងក្លាដើម្បីក្លាយជាអ្នកអភិវឌ្ឍន៍ កុំព្យូទ័រ និងអ៊ីនធឺណិត។ ប្រសិនបើអ្នកមានវា នោះអ្នកមានអ្វីគ្រប់យ៉ាងដើម្បីចាប់ផ្តើម។
### តម្លើង Node.js
អ្នកប្រហែលជាមិនត្រូវការ Node.js ទេឥឡូវនេះ ប៉ុន្តែអ្នកប្រហែលជាត្រូវការវានៅពេលក្រោយ។ ដំឡើង [node.js](https://nodejs.org/en/).
![Node download](images/download_node.png)
បន្ទាប់ពីទាញយកចុចពីរដងដើម្បីដម្លើង
![Install node](images/install_node.png)
យើងអាចពិនិត្យមើលថាតើ node ត្រូវបានដំឡើងនៅលើម៉ាស៊ីនរបស់យើងដោយបើក terminal រឺក៏ command prompt
```sh
asabeneh $ node -v
v12.14.0
```
នៅពេលបង្កើតការបង្រៀននេះ ខ្ញុំកំពុងប្រើ Node កំណែ 12.14.0 ប៉ុន្តែឥឡូវនេះកំណែដែលបានណែនាំរបស់ Node.js គឺ v14.17.6 ហើយអ្នកអាចនឹងមានកំណែ Node.js ខ្ពស់ជាងនេះ។
### Browser
Browsers គឺមានច្រើនប៉ុន្តែខ្ញុំណែនាំឲប្រើ Google Chrome.
#### ការតម្លើង Google Chrome
តម្លើង [Google Chrome](https://www.google.com/chrome/) ប្រសិនបើអ្នកមិនទាន់មាន។ យើងអាចសរសេរកូដ JavaScript តូចៗនៅលើ browser console ប៉ុន្តែយើងមិនប្រើ browser console ដើម្បីអភិវឌ្ឍកម្មវិធីទេ។
![Google Chrome](images/google_chrome.png)
#### ការបើក Google Chrome Console
អ្នកអាចបើក Google Chrome console ដោយចុចចំនុចបីនៅជ្រុងខាងស្តាំខាងលើនៃ Browser ដោយជ្រើសរើស _More tools -> Developer tools_ ឬដោយប្រើក្តារចុច shortcut។ ខ្ញុំចូលចិត្ត shortcut
![ការបើក chrome](images/opening_developer_tool.png)
ដើម្បីបើក Chrome console ដោយប្រើក្តារចុច shortcut។
```sh
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
```
![ការបើក console](images/opening_chrome_console_shortcut.png)
បន្ទាប់ពីអ្នកបើក Google Chrome console សូមព្យាយាមរុករកប៊ូតុងដែលបានសម្គាល់។ យើងនឹងចំណាយពេលភាគច្រើននៅលើ console ហ្នឹង។ Console គឺជាកន្លែងដាក់កូដ JavaScript របស់អ្នក។ ម៉ាស៊ីន Google Console V8 ផ្លាស់ប្តូរកូដ JavaScript របស់អ្នកទៅជាកូដម៉ាស៊ីន។
តោះយើងចាប់ផ្តើមសរសេរ JavaScript នៅលើ Google Chrome console៖
![ការសរសេរកូដនៅលើ console](./images/js_code_on_chrome_console.png)
#### ការសរសេរកូដនៅលើ ​browser console
យើងអាចសរសេរកូដ JavaScript នៅលើ Google console ឬ browser console ណាមួយ។ ប៉ុន្តែសម្រាប់ challengeនេះ យើងផ្តោតលើ Google Chrome console ប៉ុណ្ណោះ។ អ្នកអាចបើក console ដោយប្រើ៖
```sh
Mac
Command+Option+I
Windows:
Ctl+Shift+I
```
##### Console.log
ដើម្បីសរសេរកូដ JavaScript ដំបូងរបស់យើង យើងបានប្រើអនុគមន៍ដែលភ្ជាប់មកជាមួយ JavaScript គឺ **console.log()**។ យើងបញ្ចូល argument ជាទិន្នន័យបញ្ចូល ហើយអនុគមន៍នឹងបង្ហាញលទ្ធផល។ យើងបានបញ្ចូល `'Hello World'` ជាទិន្នន័យបញ្ចូល ឬ argument ទៅក្នុងអនុគមន៍ console.log()។
```js
console.log("Hello, World!");
```
##### Console.log ជាមួយ Arguments ច្រើន
អនុគមន៍ **`console.log()`** អាចយកប៉ារ៉ាម៉ែត្រជាច្រើនដែលបំបែកដោយសញ្ញាក្បៀស។ ហើយ syntax មើលទៅដូចនេះ៖ **`console.log(param1, param2, param3)`**
![console log ជាមួយ arguments ច្រើន](./images/console_log_multipl_arguments.png)
```js
console.log("Hello", "World", "!");
console.log("HAPPY", "NEW", "YEAR", 2020);
console.log("Welcome", "to", 30, "Days", "Of", "JavaScript");
```
ដូចដែលអ្នកអាចមើលឃើញពីកូដខាងលើ _`console.log()`_ អាចយក argument ច្រើន។
អបអរសាទរ! អ្នកបានសរសេរកូដ JavaScript ដំបូងរបស់អ្នកបានហើយដោយប្រើ _`console.log()`_។
##### Comments
យើងអាចបន្ថែម comment ទៅកូដរបស់យើង។ comment មានសារៈសំខាន់ខ្លាំងណាស់ក្នុងការធ្វើឱ្យកូដអាចអានបានកាន់តែច្រើន និងដើម្បីទុកការកត់សម្គាល់នៅក្នុងកូដរបស់យើង។ JavaScript មិនអានផ្នែក comment នៃកូដរបស់យើងទេ។ នៅក្នុង JavaScript បន្ទាត់ណាមួយដែលចាប់ផ្តើមដោយ // គឺជា comment ហើយអ្វីទាំងអស់ដែលរុំព័ទ្ធដូចនេះ `//` ក៏ជា comment ផងដែរ។
**ឧទាហរណ៍: Comment** មួយជួរ
```js
// This is the first comment
// This is the second comment
// I am a single line comment
```
**ឧទាហរណ៍: Comment** ច្រើនជួរ
```js
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/
```
##### Syntax
ភាសាសរសេរកម្មវិធីគឺស្រដៀងនឹងភាសាមនុស្សដែរ។ ភាសាអង់គ្លេស ឬភាសាផ្សេងទៀតជាច្រើនប្រើពាក្យ ឃ្លា ប្រយោគ ប្រយោគផ្សំ និងផ្សេងៗទៀត ដើម្បីបញ្ជូនសារដ៏មានអត្ថន័យ។ ក្នុងភាសាអង់គ្លេស syntax គឺជាការរៀបចំពាក្យ និងឃ្លាដើម្បីបង្កើតប្រយោគដែលមានទម្រង់ល្អក្នុងភាសាមួយ។ និយមន័យបច្ចេកទេសនៃ synxtax គឺជារចនាសម្ព័ន្ធនៃប្រយោគនៅក្នុងភាសាកុំព្យូទ័រ។ ភាសាសរសេរកម្មវិធីមាន syntax។ JavaScript គឺជាភាសាសរសេរកម្មវិធី ហើយដូចជាភាសាសរសេរកម្មវិធីផ្សេងទៀតដែរ វាមាន syntax ផ្ទាល់ខ្លួន។ ប្រសិនបើយើងមិនសរសេរ syntax ដែល JavaScript យល់ទេ វានឹងលើកឡើងនូវ error ផ្សេងៗ។ យើងនឹងរុករកប្រភេទផ្សេងៗនៃ error ក្នុង JavaScript នៅពេលក្រោយ។ សម្រាប់ពេលនេះ យើងនឹងមើលកំហុស syntax ខ្លះៗ។
![Error](images/raising_syntax_error.png)
ខ្ញុំបានធ្វើកំហុសដោយចេតនាមួយ។ ជាលទ្ធផល ក្នុង console គឺបានបញ្ជាក់ពី syntax erros នោះ។ តាមពិត syntax គឺផ្តល់ព័ត៌មានច្បាស់ណាស់។ វាប្រាប់ពីប្រភេទនៃកំហុសដែលបានកើតឡើង។ តាមរយៈការអានការណែនាំអំពីកំហុសឆ្គង យើងអាចកែ syntax និងដោះស្រាយបញ្ហាបាន។ ដំណើរការនៃការកំណត់អត្តសញ្ញាណ និងកែកំហុសចេញពីកម្មវិធីត្រូវបានគេហៅថា debugging។ ពេលនេះយើងនឹងដោះស្រាយកំហុសនេះ:
```js
console.log("Hello, World!");
console.log("Hello, World!");
```
រហូតមកដល់ពេលនេះ យើងបានឃើញពីរបៀបបង្ហាញអត្ថបទដោយប្រើ _`console.log()`_។ ប្រសិនបើយើងចង់បង្ហាញអត្ថបទរឺប្រយោគដោយប្រើ _`console.log()`_ នោះអត្ថបទត្រូវតែនៅខាងក្នុង single quotes, double quotes, or a backtick
**ឧទាហរណ៍:**
```js
console.log("Hello, World!");
console.log("Hello, World!");
console.log(`Hello, World!`);
```
#### Arithmetics
ឥឡូវនេះ យើងនឹងអនុវត្តការសរសេរកូដ JavaScript បន្ថែមទៀតដោយប្រើ _`console.log()`_ នៅលើ Google Chrome Console សម្រាប់ប្រភេទទិន្នន័យលេខ។ លើសពីនេះ យើងក៏អាចធ្វើការគណនាគណិតវិទ្យាដោយប្រើ JavaScript ផងដែរ។ យើងនឹងធ្វើការគណនាដ៏សាមញ្ញដូចខាងក្រោម។
វាអាចទៅរួចក្នុងការសរសេរកូដ JavaScript នៅលើ Google Chrome ​Console ដោយផ្ទាល់ដោយគ្មានមុខងារ **_`console.log()`_**។ ទោះជាយ៉ាងណាក៏ដោយ វាត្រូវបានរួមបញ្ចូលនៅក្នុងការណែនាំនេះ ដោយសារតែ challenge នេះនឹងធ្វើនៅលើ text editor ភាគច្រើន។ អ្នកអាចលេងដោយផ្ទាល់ជាមួយការណែនាំនៅលើ console។
![Arithmetic](images/arithmetic.png)
```js
console.log(2 + 3); // ផលបូក
console.log(3 - 2); // ផលដក
console.log(2 * 3); // ផលគុណ
console.log(3 / 2); // ផលចែក
console.log(3 % 2); // modulus - ការស្វែងរកសំណល់នៃផលចែក
console.log(3 ** 2); // ស្វ័យគុណ 3 ** 2 == 3 * 3
```
### កម្មវិធីនិពន្ធកូដ
យើង​អាច​សរសេរ​កូដ​របស់​យើង​នៅ​លើ browser console ប៉ុន្តែ​វា​មិនមែន​សម្រាប់​គម្រោង​ធំ​ៗទេ។ នៅក្នុងការងារពិតប្រាកដ អ្នកអភិវឌ្ឍន៍ប្រើប្រាស់កម្មវិធីកែកូដផ្សេងៗដើម្បីសរសេរកូដរបស់ពួកគេ។ ក្នុងរយៈពេល 30 ថ្ងៃនៃ challenge JavaScript នេះ យើងនឹងប្រើប្រាស់ Visual Studio Code ។
#### ការតម្លើង Visual Studio Code
Visual Studio Code គឺជាកម្មវិធីនិពន្ធកូដ open source ដ៏ពេញនិយម។ ខ្ញុំណែនាំអោយ [ទាញយក Visual Studio Code](https://code.visualstudio.com/) ប៉ុន្តែប្រសិនបើអ្នកពេញចិត្តនឹងកម្មវិធីផ្សេងទៀត សូមធ្វើតាមអ្វីដែលអ្នកមាន។
![Vscode](images/vscode.png)
ប្រសិនបើអ្នកបានដំឡើង Visual Studio Code រួចរាល់យើងនឹងចាប់ផ្តើមប្រើវា។
#### របៀបប្រើ Visual Studio Code
បើក Visual Studio Code ដោយចុចពីរដងលើរូបតំណាងរបស់វា។ នៅពេលអ្នកបើកវា អ្នកនឹងទទួលបាន interface បែបនេះ។
![Vscode ui](./images/vscode_ui.png)
![បន្ថែមគម្រោងក្នុង Vscode](./images/adding_project_to_vscode.png)
![បើកគម្រោងក្នុង Vscode](./images/opening_project_on_vscode.png)
![script file](images/scripts_on_vscode.png)
![ដម្លើង Live Server](images/vsc_live_server.png)
![ដំណើរការ script](./images/running_script.png)
![ដំណើរការកូដ](./images/launched_on_new_tab.png)
## ការបន្ថែម JavaScript ទៅគេហទំព័រ
JavaScript អាច​ត្រូវ​បាន​បន្ថែម​ទៅ​ទំព័រ​បណ្ដាញ​តាម​បី​វិធី​ផ្សេង​គ្នា៖
- **_Inline script_**
- **_Internal script_**
- **_External script_**
- **_Multiple External scripts_**
ផ្នែកខាងក្រោមបង្ហាញពីវិធីផ្សេងគ្នានៃការបន្ថែមកូដ JavaScript ទៅកាន់គេហទំព័ររបស់អ្នក។
### Inline Script
បង្កើតថតគម្រោងនៅលើកុំព្យូទ័ររបស់អ្នក ឬនៅក្នុងទីតាំងណាមួយ ហើយដាក់ឈ្មោះវាថា 30DaysOfJS ហើយបង្កើតឯកសារ **_`index.html`_** នៅក្នុងថតគម្រោង។ បន្ទាប់មកបញ្ចូលកូដខាងក្រោម ហើយបើកវាក្នុងកម្មវិធី browser ឧទាហរណ៍ [Chrome](https://www.google.com/chrome/)។
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Inline Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
</body>
</html>
```
ឥឡូវនេះ អ្នកទើបតែសរសេរ script ជា inline script។ យើងអាចបង្កើតសារដាស់តឿនលេចឡើងដោយប្រើអនុគមន៍ _`alert()`_ ដែលភ្ជាប់មកជាមួយ JavaScript។
### Internal Script
សម្រាប់ internal script គឺអាចសរសេរបាននៅក្នុង _`head`_ ឬ _`body`_ ប៉ុន្តែវាត្រូវបានគេពេញចិត្តក្នុងការដាក់វានៅលើ body នៃឯកសារ HTML ។
ដំបូង​យើង​សរសេរ​នៅ​ផ្នែក​ head ​នៃ​គេហទំព័រ។
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Internal Script</title>
<script>
console.log("Welcome to 30DaysOfJavaScript");
</script>
</head>
<body></body>
</html>
```
នេះជារបៀបដែលយើងសរសេរ internal script ភាគច្រើន។ ការសរសេរកូដ JavaScript នៅក្នុងផ្នែក body គឺជាជម្រើសដែលពេញចិត្តបំផុត។ អ្នកអាចបើក console នៅក្នុង browser ដើម្បីមើលលទ្ធផលពី `console.log()`។
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfScript:Internal Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script>
console.log("Welcome to 30DaysOfJavaScript");
</script>
</body>
</html>
```
បើក console នៅក្នុង browser ដើម្បីមើលលទ្ធផលពី `console.log()`។
![js code from vscode](./images/js_code_vscode.png)
### External Script
ស្រដៀងទៅនឹង internal script ដែរ external script អាចមាននៅលើ header រឺ body ប៉ុន្តែវាត្រូវបានគេពេញចិត្តក្នុងការដាក់វានៅក្នុង body។
ដំបូង យើងគួរតែបង្កើតឯកសារ JavaScript ខាងក្រៅដែលដែលមានឈ្មោះបញ្ចប់ដោយ .js ។ ឯកសារទាំងអស់ដែលបញ្ចប់ដោយផ្នែកបន្ថែម .js គឺជាឯកសារ JavaScript ។ បង្កើតឯកសារមួយដែលមានឈ្មោះថា introduction.js នៅក្នុងថតគម្រោងរបស់អ្នក ហើយសរសេរកូដខាងក្រោម ហើយភ្ជាប់ឯកសារ .js នេះនៅផ្នែកខាងក្រោមនៃ body។
```js
console.log("Welcome to 30DaysOfJavaScript");
```
External scripts នៅក្នុង _head_:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:External script</title>
<script src="introduction.js"></script>
</head>
<body></body>
</html>
```
External scripts នៅក្នុង _body_:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:External script</title>
</head>
<body>
<!-- external JavaScript អាចនៅក្នុង header រឺ body -->
<!-- មុននឹងស្លាកបិទ body គឺជាកន្លែងដែលណែនាំអោយដាក់ external script JavaScript -->
<script src="introduction.js"></script>
</body>
</html>
```
បើក console នៅក្នុង browser ដើម្បីមើលលទ្ធផលនៃ `console.log()`។
### External Scripts ច្រើន
យើងក៏អាចភ្ជាប់ឯកសារ JavaScript ខាងក្រៅជាច្រើនទៅគេហទំព័រមួយ។
បង្កើតឯកសារ `helloworld.js` នៅខាងក្នុងថត 30DaysOfJS ហើយសរសេរកូដខាងក្រោម។
```js
console.log("Hello, World!");
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple External Scripts</title>
</head>
<body>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
</body>
</html>
```
_ឯកសារ main.js របស់អ្នកគួរតែនៅខាងក្រោមស្គ្រីបផ្សេងទៀតទាំងអស់_។ វាសំខាន់ខ្លាំងណាស់ក្នុងការចងចាំរឿងនេះ។
![Multiple Script](./images/multiple_script.png)
## ការណែនាំអំពីប្រភេទទិន្នន័យ
នៅក្នុង JavaScript ក៏ដូចជាភាសាសរសេរកម្មវិធីផ្សេងទៀត មានប្រភេទទិន្នន័យផ្សេងៗគ្នា។ ខាងក្រោមនេះគឺជាប្រភេទទិន្នន័យបឋមរបស់ JavaScript៖ _String, Number, Boolean, undefined, Null_, និង _Symbol_។
### Numbers
- ជាចំនួនគត់៖ ចំនួនគត់ (អវិជ្ជមាន សូន្យ និងវិជ្ជមាន)
ឧទាហរណ៍:
... -3, -2, -1, 0, 1, 2, 3 ...
- ជាលេខ៖ លេខទសភាគ
ឧទាហរណ៍:
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
### Strings
ជាបណ្តុំនៃតួអក្សរមួយ ឬច្រើននៅក្នុង single quotes, double quotes រឺក៏ backticks។
**ឧទាហរណ៍:**
```js
"a";
"Asabeneh";
"Asabeneh";
"Finland";
"JavaScript is a beautiful programming language";
"I love teaching";
"I hope you are enjoying the first day"`We can also create a string using a backtick`;
("A string could be just as small as one character or as big as many pages");
("Any data type under a single quote, double quote or backtick is a string");
```
### Booleans
តម្លៃ Boolean គឺមានពីរ ពិត រឺ មិនពិត។ ការប្រៀបធៀបណាមួយបង្កើតជាតម្លៃប៊ូលីន ដែលជាពិតឬមិនពិត។
ប្រភេទទិន្នន័យប៊ូលីនគឺជាតម្លៃពិតឬមិនពិត។
**ឧទាហរណ៍:**
```js
true; // ប្រសិនបើអំពូលត្រូវបានបើក តម្លៃគឺពិត
false; // ប្រសិនបើពន្លឺត្រូវបានបិទ តម្លៃគឺមិនពិត
```
### Undefined
នៅក្នុង JavaScript ប្រសិនបើយើងមិនកំណត់តម្លៃទៅ variable ទេ នោះតម្លៃគឺ undefined រឺមិនកំណត់។ បន្ថែមពីលើនោះ ប្រសិនបើអនុគមន៍មួយមិនផ្តល់អ្វីមកវិញទេ នោះវាផ្តល់តម្លៃមួយគឺ មិនកំណត់។
```js
let firstName;
console.log(firstName); // មិន​បាន​កំណត់​ ព្រោះ​វា​មិន​ទាន់​បាន​កំណត់​ជា​តម្លៃ​នៅ​ឡើយ​ទេ។
```
### Null
Null ក្នុង JavaScript មានន័យថាតម្លៃទទេ។
```js
let emptyValue = null;
```
## ការពិនិត្យប្រភេទទិន្នន័យ
ដើម្បីពិនិត្យមើលប្រភេទទិន្នន័យនៃ variable ណាមួយ យើងប្រើប្រតិបត្តិករ **typeof**។ សូមមើលឧទាហរណ៍ខាងក្រោម។
```js
console.log(typeof "Asabeneh"); // string
console.log(typeof 5); // number
console.log(typeof true); // boolean
console.log(typeof null); // object type
console.log(typeof undefined); // undefined
```
## Comments ម្តងទៀត
សូមចងចាំថា comment នៅក្នុង JavaScript គឺស្រដៀងទៅនឹងភាសាសរសេរកម្មវិធីផ្សេងទៀត។ comment មានសារៈសំខាន់ក្នុងការធ្វើឱ្យកូដរបស់អ្នកអាចអានបានកាន់តៃស្រួល។
មានវិធីពីរយ៉ាងក្នុងការសរសេរ comment៖
- comment មួយជួរ
- comment ច្រើនជួរ
```js
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; comment មួយជួរ
// let lastName = 'Yetayeh'; comment មួយជួរ
```
comment ច្រើនជួរ:
```js
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
នេះជា comment ច្រើនជួរ
*/
```
## Variables
variables គឺជាកន្លែងផ្ទុកទិន្នន័យមួយ។ variable ត្រូវបានប្រើដើម្បី ផ្ទុកទុកនូវទិន្នន័យនៅក្នុង memory។ នៅពេល variable ត្រូវបានប្រកាស ទីតាំងនៅក្នុង memory ត្រូវបានរក្សារទុក។ ហើយនៅពេល variable ទទួលបាននូវទិន្នន័យ កន្លៃង memory នឹងត្រូវបានបំពេញដោយទិន្នន័យនោះ។ ដើម្បីប្រកាស variable យើងប្រើពាក្យគន្លឹះ _var_, _let_, ឬ _const_ ។
សម្រាប់ variable ដែលអាចផ្លាស់ប្តូរនៅពេលផ្សេងគ្នា យើងប្រើ _let_ ។ ប្រសិនបើទិន្នន័យមិនផ្លាស់ប្តូរទាល់តែសោះ យើងប្រើ _const_ ។ ឧទាហរណ៍ PI ឈ្មោះប្រទេស និង ទំនាញ ដែលមិនផ្លាស់ប្តូរនោះយើងអាចប្រើ _const_ ។ យើងនឹងមិនប្រើ var ក្នុង challenge នេះទេ ហើយខ្ញុំមិនណែនាំអ្នកឱ្យប្រើវាទេ។ ព្រោះវា​ងាយ​នឹង​មាន​កំហុស​ក្នុង​ការប្រកាស variable។ យើងនឹងនិយាយបន្ថែមអំពី var, let, និង const ដោយលម្អិតនៅក្នុងផ្នែកផ្សេងទៀត។ សម្រាប់ពេលនេះ ការពន្យល់ខាងលើគឺគ្រប់គ្រាន់ហើយ។
ឈ្មោះ variable នៅក្នុង JavaScript ត្រឹមត្រូវត្រូវតែអនុវត្តតាមច្បាប់ខាងក្រោម៖
- ឈ្មោះ variable ក្នុង JavaScript មិនគួរចាប់ផ្តើមដោយលេខទេ។
- ឈ្មោះ​ variable ក្នុង JavaScript មិន​អនុញ្ញាត​ឱ្យ​មាន​តួអក្សរ​ពិសេស​ទេ លើក​លែង​តែ​សញ្ញា​ដុល្លារ និង​សញ្ញា​គូស​ក្រោម។
- ឈ្មោះ variable ក្នុង JavaScript ធ្វើតាមអនុសញ្ញា camelCase ។
- ឈ្មោះ variable ក្នុង JavaScript មិនគួរមានចន្លោះរវាងពាក្យទេ។
ខាងក្រោមនេះគឺជាឧទាហរណ៍នៃ variable ក្នុង JavaScript ដែលត្រឹមត្រូវ។
```js
firstName;
lastName;
country;
city;
capitalCity;
age;
isMarried;
first_name;
last_name;
is_married;
capital_city;
num1;
num_1;
_num_1;
$num1;
year2020;
year_2020;
```
សំណុំ variable ទីមួយ និងទីពីរនៅខាងលើគឺធ្វើតាមអនុសញ្ញា camelCase នៃការប្រកាសនៅក្នុង JavaScript ។ នៅក្នុង challenge នេះ យើងនឹងប្រើ camelCase (camelWithOneHump) ដើម្បីសម្គាល់ variable។ ហើយយើងប្រើ CamelCase(CamelWithTwoHump) ដើម្បីប្រកាស class។ យើងនឹងពិភាក្សាអំពី class និង object នៅក្នុងផ្នែកផ្សេងទៀត។
ឧទាហរណ៍នៃ variable ដែលមិនត្រឹមត្រូវ:
```js
first-name
1_num
num_#_1
```
ឥឡូវ​នេះយើងនឹងប្រកាស variable ជាមួយនឹងប្រភេទទិន្នន័យផ្សេងគ្នា។ ដើម្បីប្រកាស variable យើងត្រូវប្រើពាក្យគន្លឹះ _let_ ឬ _const_ មុនឈ្មោះ variable។ បន្ទាប់ពី​ឈ្មោះ​ variable យើង​សរសេរ​សញ្ញា​ស្មើ (សញ្ញា​ប្រមាណវិធី​ចាត់តាំង) និង​តម្លៃ (ទិន្នន័យ​ដែល​បាន​ចាត់តាំង)។
```js
// Syntax
let nameOfVariable = value;
```
nameOfVariable គឺជាឈ្មោះដែលរក្សាទុកទិន្នន័យនៃតម្លៃផ្សេងៗគ្នា។ សូមមើលខាងក្រោមសម្រាប់ឧទាហរណ៍លម្អិត។
**ឧទាហរណ៍នៃ variable ដែលបានប្រកាស**
```js
// ប្រកាស variable ដែលមានប្រភេទទិន្នន័យផ្សេងៗគ្នា
let firstName = "Asabeneh"; // ត្រកូលរបស់មនុស្ស
let lastName = "Yetayeh"; // នាមត្រកូលរបស់មនុស្ស
let country = "Finland"; // ប្រទេស
let city = "Helsinki"; // រាជធានី
let age = 100; // អាយុ
let isMarried = true;
console.log(firstName, lastName, country, city, age, isMarried);
```
```sh
Asabeneh Yetayeh Finland Helsinki 100 true
```
```js
// Declaring variables with number values
let age = 100; // age in years
const gravity = 9.81; // earth gravity in m/s2
const boilingPoint = 100; // water boiling point, temperature in °C
const PI = 3.14; // geometrical constant
console.log(gravity, boilingPoint, PI);
```
```sh
9.81 100 3.14
```
```js
// variable ក៏អាចប្រកាសក្នុងជួរមួយបំបែកដោយសញ្ញាក្បៀសដែរ ប៉ុន្តែខ្ញុំសូមណែនាំឱ្យប្រើបន្ទាត់ដាច់ដោយឡែកដើម្បីធ្វើឱ្យកូដអាចអានបានកាន់តែស្រួល។
let name = "Asabeneh",
job = "teacher",
live = "Finland";
console.log(name, job, live);
```
```sh
Asabeneh teacher Finland
```
នៅពេលអ្នកដំណើរ index.html នៅក្នុងថត 01-Day អ្នកគួរតែទទួលបានវា៖
![Day one](./images/day_1.png)
🌕 អស្ចារ្យមែន! អ្នកទើបតែបានបញ្ចប់ challenge ថ្ងៃទី 1 ហើយអ្នកកំពុងធ្វើដំណើរទៅកាន់ភាពអស្ចារ្យ។ ឥឡូវធ្វើលំហាត់ខ្លះសម្រាប់ខួរក្បាល និងសាច់ដុំរបស់អ្នក។
# 💻 លំហាត់សម្រាប់ថ្ងៃទី 1
1. Write a single line comment which says, _comments can make code readable_
2. Write another single comment which says, _Welcome to 30DaysOfJavaScript_
3. Write a multiline comment which says, _comments can make code readable, easy to reuse_
_and informative_
4. Create a variable.js file and declare variables and assign string, boolean, undefined and null data types
5. Create datatypes.js file and use the JavaScript **_typeof_** operator to check different data types. Check the data type of each variable
6. Declare four variables without assigning values
7. Declare four variables with assigned values
8. Declare variables to store your first name, last name, marital status, country and age in multiple lines
9. Declare variables to store your first name, last name, marital status, country and age in a single line
10. Declare two variables _myAge_ and _yourAge_ and assign them initial values and log to the browser console.
1. សរសេរ comment មួយបន្ទាត់ដែលនិយាយថា _comments អាចធ្វើឱ្យកូដអាចអានបាន_
2. សរសេរ comment តែមួយផ្សេងទៀតដែលនិយាយថា _Welcome to 30DaysOfJavaScript_
3. សរសេរ comment ច្រើនបន្ទាត់ដែលនិយាយថា _comments អាចធ្វើឱ្យកូដអាចអានបាន ងាយស្រួលប្រើឡើងវិញ_
_និងព័ត៌មាន_
4. បង្កើតឯកសារ variable.js ហើយប្រកាស variable និងកំណត់ប្រភេទទិន្នន័យ string, boolean, undefined និង null
5. បង្កើតឯកសារ datatypes.js ហើយប្រើ JavaScript **_typeof_** operator ដើម្បីពិនិត្យមើលប្រភេទទិន្នន័យផ្សេងៗគ្នា។ ហើយពិនិត្យប្រភេទទិន្នន័យនៃ variable នីមួយៗ
6. ប្រកាស variable បួនដោយមិនកំណត់តម្លៃ
7. ប្រកាស variable បួនជាមួយនឹងនិងកំណត់តម្លៃ
8. ប្រកាស variable ដើម្បីរក្សាទុកឈ្មោះ នាមត្រកូល ស្ថានភាពអាពាហ៍ពិពាហ៍ ប្រទេស និងអាយុរបស់អ្នកនៅក្នុងជួរជាច្រើន
9. ប្រកាស variable ដើម្បីរក្សាទុកឈ្មោះ នាមត្រកូល ស្ថានភាពអាពាហ៍ពិពាហ៍ ប្រទេស និងអាយុរបស់អ្នកនៅក្នុងបន្ទាត់តែមួយ
10. ប្រកាស variable ពីរ _myAge_ និង _yourAge_ ហើយកំណត់តម្លៃឱ្យពួកវា ហើយបង្ហាញតម្លៃរបស់ពួកវាទៅក្នុង Browser console។
```sh
I am 25 years old.
You are 30 years old.
```
🎉 អបអរសាទរ ! 🎉
[Day 2 >>](./02_Day_Data_types/02_day_data_types.md)

1
readMe.md
Unescape View File

@ -71,6 +71,7 @@
🇻🇳 [Vietnamese](./Vietnamese/README.md)
🇵🇱 [Polish](./Polish/readMe.md)
🇧🇷 [Portuguese](./Portuguese/readMe.md)
🇰🇭 [Khmer](./Khmer/readMe.md)
</div>

Write Preview
Loading…
Cancel
Save