diff --git a/Khmer/02_Day_Data_types/02_day_data_types.md b/Khmer/02_Day_Data_types/02_day_data_types.md new file mode 100644 index 0000000..27c4f46 --- /dev/null +++ b/Khmer/02_Day_Data_types/02_day_data_types.md @@ -0,0 +1,986 @@ +
+

30 ថ្ងៃនៃ JavaScript: ប្រភេទទិន្នន័យ

+ + + + + Twitter Follow + + +អ្នកនិពន្ធ: +Asabeneh Yetayeh
+ មករា, 2020 + + +
+ + +[<< ថ្ងៃទី ១](../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) diff --git a/Khmer/03_Day_Booleans_operators_date/03_booleans_operators_date.md b/Khmer/03_Day_Booleans_operators_date/03_booleans_operators_date.md new file mode 100644 index 0000000..da05d31 --- /dev/null +++ b/Khmer/03_Day_Booleans_operators_date/03_booleans_operators_date.md @@ -0,0 +1,637 @@ +
+

30 ថ្ងៃនៃ JavaScript: Booleans, ប្រតិបត្តិករ, Date

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 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 = (y2-y1)/(x2-x1) ។ ស្វែងរកជម្រាលរវាងចំណុច (2, 2) និងចំណុច (6,10) +1. ប្រៀបធៀបជម្រាលនៃសំណួរទាំងពីរខាងលើ។ +1. គណនាតម្លៃ y (y = x2 + 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) diff --git a/Khmer/04_Day_Conditionals/04_day_conditionals.md b/Khmer/04_Day_Conditionals/04_day_conditionals.md new file mode 100644 index 0000000..9e6d29a --- /dev/null +++ b/Khmer/04_Day_Conditionals/04_day_conditionals.md @@ -0,0 +1,377 @@ +
+

30 ថ្ងៃនៃ JavaScript៖ Conditionals

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 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) diff --git a/Khmer/05_Day_Arrays/05_day_arrays.md b/Khmer/05_Day_Arrays/05_day_arrays.md new file mode 100644 index 0000000..49655b2 --- /dev/null +++ b/Khmer/05_Day_Arrays/05_day_arrays.md @@ -0,0 +1,774 @@ +
+

30 ថ្ងៃនៃ JavaScript: Arrays

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 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) diff --git a/Khmer/06_Day_Loops/06_day_loops.md b/Khmer/06_Day_Loops/06_day_loops.md new file mode 100644 index 0000000..0d33b61 --- /dev/null +++ b/Khmer/06_Day_Loops/06_day_loops.md @@ -0,0 +1,484 @@ +
+

30 ថ្ងៃនៃ JavaScript: Loops

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 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) diff --git a/Khmer/07_Day_Functions/07_day_functions.md b/Khmer/07_Day_Functions/07_day_functions.md new file mode 100644 index 0000000..c6eeb59 --- /dev/null +++ b/Khmer/07_Day_Functions/07_day_functions.md @@ -0,0 +1,707 @@ +
+

30 ថ្ងៃនៃ JavaScript: Functions

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 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) \ No newline at end of file diff --git a/Khmer/08_Day_Objects/08_day_objects.md b/Khmer/08_Day_Objects/08_day_objects.md new file mode 100644 index 0000000..44dc17b --- /dev/null +++ b/Khmer/08_Day_Objects/08_day_objects.md @@ -0,0 +1,598 @@ +
+

30 ថ្ងៃនៃ JavaScript: Objects

+ + + + + Twitter Follow + + + អ្នកនិពន្ធ: + Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + +
+ +[<< ថ្ងៃទី 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) diff --git a/Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md b/Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md new file mode 100644 index 0000000..599c315 --- /dev/null +++ b/Khmer/09_Day_Higher_order_functions/09_day_higher_order_functions.md @@ -0,0 +1,704 @@ +
+

30 ថ្ងៃនៃ JavaScript: Higher Order Functions

+ + + + + Twitter Follow + + +អ្នកនិពន្ធ: +Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + + +
+ +[<< ថ្ងៃទី 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) diff --git a/Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md b/Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md new file mode 100644 index 0000000..6dbdb85 --- /dev/null +++ b/Khmer/10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md @@ -0,0 +1,440 @@ +
+

30 ថ្ងៃនៃ JavaScript: Sets and Maps

+ + + + + Twitter Follow + + +អ្នកនិពន្ធ: +Asabeneh Yetayeh
+ ខែមករា ឆ្នាំ ២០២០ + + +
+ +[<< ថ្ងៃទី 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) diff --git a/Khmer/images/30DaysOfJavaScript.png b/Khmer/images/30DaysOfJavaScript.png new file mode 100644 index 0000000..4142286 Binary files /dev/null and b/Khmer/images/30DaysOfJavaScript.png differ diff --git a/Khmer/images/adding_project_to_vscode.png b/Khmer/images/adding_project_to_vscode.png new file mode 100644 index 0000000..1935860 Binary files /dev/null and b/Khmer/images/adding_project_to_vscode.png differ diff --git a/Khmer/images/arithmetic.png b/Khmer/images/arithmetic.png new file mode 100644 index 0000000..9830916 Binary files /dev/null and b/Khmer/images/arithmetic.png differ diff --git a/Khmer/images/array_index.png b/Khmer/images/array_index.png new file mode 100644 index 0000000..355324e Binary files /dev/null and b/Khmer/images/array_index.png differ diff --git a/Khmer/images/assignment_operators.png b/Khmer/images/assignment_operators.png new file mode 100644 index 0000000..99d51d2 Binary files /dev/null and b/Khmer/images/assignment_operators.png differ diff --git a/Khmer/images/banners/Day -1 – 31.png b/Khmer/images/banners/Day -1 – 31.png new file mode 100644 index 0000000..d9a9639 Binary files /dev/null and b/Khmer/images/banners/Day -1 – 31.png differ diff --git a/Khmer/images/banners/day_1_1.png b/Khmer/images/banners/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/Khmer/images/banners/day_1_1.png differ diff --git a/Khmer/images/banners/day_1_10.png b/Khmer/images/banners/day_1_10.png new file mode 100644 index 0000000..e063dec Binary files /dev/null and b/Khmer/images/banners/day_1_10.png differ diff --git a/Khmer/images/banners/day_1_11.png b/Khmer/images/banners/day_1_11.png new file mode 100644 index 0000000..0c2d60b Binary files /dev/null and b/Khmer/images/banners/day_1_11.png differ diff --git a/Khmer/images/banners/day_1_12.png b/Khmer/images/banners/day_1_12.png new file mode 100644 index 0000000..232ac85 Binary files /dev/null and b/Khmer/images/banners/day_1_12.png differ diff --git a/Khmer/images/banners/day_1_13.png b/Khmer/images/banners/day_1_13.png new file mode 100644 index 0000000..488f522 Binary files /dev/null and b/Khmer/images/banners/day_1_13.png differ diff --git a/Khmer/images/banners/day_1_14.png b/Khmer/images/banners/day_1_14.png new file mode 100644 index 0000000..4c5a568 Binary files /dev/null and b/Khmer/images/banners/day_1_14.png differ diff --git a/Khmer/images/banners/day_1_15.png b/Khmer/images/banners/day_1_15.png new file mode 100644 index 0000000..e3013f6 Binary files /dev/null and b/Khmer/images/banners/day_1_15.png differ diff --git a/Khmer/images/banners/day_1_16.png b/Khmer/images/banners/day_1_16.png new file mode 100644 index 0000000..d116060 Binary files /dev/null and b/Khmer/images/banners/day_1_16.png differ diff --git a/Khmer/images/banners/day_1_17.png b/Khmer/images/banners/day_1_17.png new file mode 100644 index 0000000..69cf7ae Binary files /dev/null and b/Khmer/images/banners/day_1_17.png differ diff --git a/Khmer/images/banners/day_1_18.png b/Khmer/images/banners/day_1_18.png new file mode 100644 index 0000000..8b69340 Binary files /dev/null and b/Khmer/images/banners/day_1_18.png differ diff --git a/Khmer/images/banners/day_1_19.png b/Khmer/images/banners/day_1_19.png new file mode 100644 index 0000000..2a785c9 Binary files /dev/null and b/Khmer/images/banners/day_1_19.png differ diff --git a/Khmer/images/banners/day_1_2.png b/Khmer/images/banners/day_1_2.png new file mode 100644 index 0000000..0f6eefb Binary files /dev/null and b/Khmer/images/banners/day_1_2.png differ diff --git a/Khmer/images/banners/day_1_20.png b/Khmer/images/banners/day_1_20.png new file mode 100644 index 0000000..befe1fc Binary files /dev/null and b/Khmer/images/banners/day_1_20.png differ diff --git a/Khmer/images/banners/day_1_21.png b/Khmer/images/banners/day_1_21.png new file mode 100644 index 0000000..634d1eb Binary files /dev/null and b/Khmer/images/banners/day_1_21.png differ diff --git a/Khmer/images/banners/day_1_22.png b/Khmer/images/banners/day_1_22.png new file mode 100644 index 0000000..81e33d9 Binary files /dev/null and b/Khmer/images/banners/day_1_22.png differ diff --git a/Khmer/images/banners/day_1_23.png b/Khmer/images/banners/day_1_23.png new file mode 100644 index 0000000..ceb0321 Binary files /dev/null and b/Khmer/images/banners/day_1_23.png differ diff --git a/Khmer/images/banners/day_1_24.png b/Khmer/images/banners/day_1_24.png new file mode 100644 index 0000000..9c8ec46 Binary files /dev/null and b/Khmer/images/banners/day_1_24.png differ diff --git a/Khmer/images/banners/day_1_25.png b/Khmer/images/banners/day_1_25.png new file mode 100644 index 0000000..60a211e Binary files /dev/null and b/Khmer/images/banners/day_1_25.png differ diff --git a/Khmer/images/banners/day_1_26.png b/Khmer/images/banners/day_1_26.png new file mode 100644 index 0000000..f187f2c Binary files /dev/null and b/Khmer/images/banners/day_1_26.png differ diff --git a/Khmer/images/banners/day_1_27.png b/Khmer/images/banners/day_1_27.png new file mode 100644 index 0000000..8637069 Binary files /dev/null and b/Khmer/images/banners/day_1_27.png differ diff --git a/Khmer/images/banners/day_1_28.png b/Khmer/images/banners/day_1_28.png new file mode 100644 index 0000000..1858aca Binary files /dev/null and b/Khmer/images/banners/day_1_28.png differ diff --git a/Khmer/images/banners/day_1_29.png b/Khmer/images/banners/day_1_29.png new file mode 100644 index 0000000..959ee36 Binary files /dev/null and b/Khmer/images/banners/day_1_29.png differ diff --git a/Khmer/images/banners/day_1_3.png b/Khmer/images/banners/day_1_3.png new file mode 100644 index 0000000..1268d2c Binary files /dev/null and b/Khmer/images/banners/day_1_3.png differ diff --git a/Khmer/images/banners/day_1_30.png b/Khmer/images/banners/day_1_30.png new file mode 100644 index 0000000..18a77c4 Binary files /dev/null and b/Khmer/images/banners/day_1_30.png differ diff --git a/Khmer/images/banners/day_1_4.png b/Khmer/images/banners/day_1_4.png new file mode 100644 index 0000000..d5262c6 Binary files /dev/null and b/Khmer/images/banners/day_1_4.png differ diff --git a/Khmer/images/banners/day_1_5.png b/Khmer/images/banners/day_1_5.png new file mode 100644 index 0000000..21bc08c Binary files /dev/null and b/Khmer/images/banners/day_1_5.png differ diff --git a/Khmer/images/banners/day_1_6.png b/Khmer/images/banners/day_1_6.png new file mode 100644 index 0000000..dbea5fd Binary files /dev/null and b/Khmer/images/banners/day_1_6.png differ diff --git a/Khmer/images/banners/day_1_7.png b/Khmer/images/banners/day_1_7.png new file mode 100644 index 0000000..eff8dac Binary files /dev/null and b/Khmer/images/banners/day_1_7.png differ diff --git a/Khmer/images/banners/day_1_8.png b/Khmer/images/banners/day_1_8.png new file mode 100644 index 0000000..ddf9007 Binary files /dev/null and b/Khmer/images/banners/day_1_8.png differ diff --git a/Khmer/images/banners/day_1_9.png b/Khmer/images/banners/day_1_9.png new file mode 100644 index 0000000..1cf688b Binary files /dev/null and b/Khmer/images/banners/day_1_9.png differ diff --git a/Khmer/images/comparison_operators.png b/Khmer/images/comparison_operators.png new file mode 100644 index 0000000..26ccb91 Binary files /dev/null and b/Khmer/images/comparison_operators.png differ diff --git a/Khmer/images/console_log_multipl_arguments.png b/Khmer/images/console_log_multipl_arguments.png new file mode 100644 index 0000000..f324a90 Binary files /dev/null and b/Khmer/images/console_log_multipl_arguments.png differ diff --git a/Khmer/images/date_time_object.png b/Khmer/images/date_time_object.png new file mode 100644 index 0000000..c5297c7 Binary files /dev/null and b/Khmer/images/date_time_object.png differ diff --git a/Khmer/images/day_1.png b/Khmer/images/day_1.png new file mode 100644 index 0000000..7daf57f Binary files /dev/null and b/Khmer/images/day_1.png differ diff --git a/Khmer/images/day_1_1.png b/Khmer/images/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/Khmer/images/day_1_1.png differ diff --git a/Khmer/images/download_node.png b/Khmer/images/download_node.png new file mode 100644 index 0000000..f290b20 Binary files /dev/null and b/Khmer/images/download_node.png differ diff --git a/Khmer/images/google_chrome.png b/Khmer/images/google_chrome.png new file mode 100644 index 0000000..af06acd Binary files /dev/null and b/Khmer/images/google_chrome.png differ diff --git a/Khmer/images/install_node.png b/Khmer/images/install_node.png new file mode 100644 index 0000000..e5aecf1 Binary files /dev/null and b/Khmer/images/install_node.png differ diff --git a/Khmer/images/js_code_on_chrome_console.png b/Khmer/images/js_code_on_chrome_console.png new file mode 100644 index 0000000..7d6002c Binary files /dev/null and b/Khmer/images/js_code_on_chrome_console.png differ diff --git a/Khmer/images/js_code_vscode.png b/Khmer/images/js_code_vscode.png new file mode 100644 index 0000000..6e1a661 Binary files /dev/null and b/Khmer/images/js_code_vscode.png differ diff --git a/Khmer/images/launched_on_new_tab.png b/Khmer/images/launched_on_new_tab.png new file mode 100644 index 0000000..ed377dc Binary files /dev/null and b/Khmer/images/launched_on_new_tab.png differ diff --git a/Khmer/images/local_storage.png b/Khmer/images/local_storage.png new file mode 100644 index 0000000..0876852 Binary files /dev/null and b/Khmer/images/local_storage.png differ diff --git a/Khmer/images/multiple_script.png b/Khmer/images/multiple_script.png new file mode 100644 index 0000000..caa067f Binary files /dev/null and b/Khmer/images/multiple_script.png differ diff --git a/Khmer/images/opening_chrome_console_shortcut.png b/Khmer/images/opening_chrome_console_shortcut.png new file mode 100644 index 0000000..eace03f Binary files /dev/null and b/Khmer/images/opening_chrome_console_shortcut.png differ diff --git a/Khmer/images/opening_developer_tool.png b/Khmer/images/opening_developer_tool.png new file mode 100644 index 0000000..6eb33dd Binary files /dev/null and b/Khmer/images/opening_developer_tool.png differ diff --git a/Khmer/images/opening_project_on_vscode.png b/Khmer/images/opening_project_on_vscode.png new file mode 100644 index 0000000..908c8fd Binary files /dev/null and b/Khmer/images/opening_project_on_vscode.png differ diff --git a/Khmer/images/projects/congratulations.gif b/Khmer/images/projects/congratulations.gif new file mode 100644 index 0000000..cddd6c4 Binary files /dev/null and b/Khmer/images/projects/congratulations.gif differ diff --git a/Khmer/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif b/Khmer/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif new file mode 100644 index 0000000..c8d2f2b Binary files /dev/null and b/Khmer/images/projects/dom_min_project_30DaysOfJavaScript_color_changing_day_9.1.gif differ diff --git a/Khmer/images/projects/dom_min_project_bar_graph_day_5.1.gif b/Khmer/images/projects/dom_min_project_bar_graph_day_5.1.gif new file mode 100644 index 0000000..a7d7962 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_bar_graph_day_5.1.gif differ diff --git a/Khmer/images/projects/dom_min_project_bar_graph_day_5.1.png b/Khmer/images/projects/dom_min_project_bar_graph_day_5.1.png new file mode 100644 index 0000000..0b6ccf7 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_bar_graph_day_5.1.png differ diff --git a/Khmer/images/projects/dom_min_project_challenge_info_day_1.1.gif b/Khmer/images/projects/dom_min_project_challenge_info_day_1.1.gif new file mode 100644 index 0000000..0551771 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_challenge_info_day_1.1.gif differ diff --git a/Khmer/images/projects/dom_min_project_challenge_info_day_1.1.png b/Khmer/images/projects/dom_min_project_challenge_info_day_1.1.png new file mode 100644 index 0000000..01a8d4f Binary files /dev/null and b/Khmer/images/projects/dom_min_project_challenge_info_day_1.1.png differ diff --git a/Khmer/images/projects/dom_min_project_countries_aray_day_2.2.png b/Khmer/images/projects/dom_min_project_countries_aray_day_2.2.png new file mode 100644 index 0000000..ca0e344 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_countries_aray_day_2.2.png differ diff --git a/Khmer/images/projects/dom_min_project_day_7.1.gif b/Khmer/images/projects/dom_min_project_day_7.1.gif new file mode 100644 index 0000000..51bdadb Binary files /dev/null and b/Khmer/images/projects/dom_min_project_day_7.1.gif differ diff --git a/Khmer/images/projects/dom_min_project_day_number_generators_2.1.png b/Khmer/images/projects/dom_min_project_day_number_generators_2.1.png new file mode 100644 index 0000000..d69a6c2 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_day_number_generators_2.1.png differ diff --git a/Khmer/images/projects/dom_min_project_keycode_day_3.2.gif b/Khmer/images/projects/dom_min_project_keycode_day_3.2.gif new file mode 100644 index 0000000..7c75c14 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_keycode_day_3.2.gif differ diff --git a/Khmer/images/projects/dom_min_project_number_generator_day_3.1.gif b/Khmer/images/projects/dom_min_project_number_generator_day_3.1.gif new file mode 100644 index 0000000..59a8dd0 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_number_generator_day_3.1.gif differ diff --git a/Khmer/images/projects/dom_min_project_solar_system_day_4.1.gif b/Khmer/images/projects/dom_min_project_solar_system_day_4.1.gif new file mode 100644 index 0000000..d88b04b Binary files /dev/null and b/Khmer/images/projects/dom_min_project_solar_system_day_4.1.gif differ diff --git a/Khmer/images/projects/dom_min_project_solar_system_day_4.1.mkv b/Khmer/images/projects/dom_min_project_solar_system_day_4.1.mkv new file mode 100644 index 0000000..1ed941c Binary files /dev/null and b/Khmer/images/projects/dom_min_project_solar_system_day_4.1.mkv differ diff --git a/Khmer/images/projects/dom_min_project_solar_system_day_4.1.mp4 b/Khmer/images/projects/dom_min_project_solar_system_day_4.1.mp4 new file mode 100644 index 0000000..69ce936 Binary files /dev/null and b/Khmer/images/projects/dom_min_project_solar_system_day_4.1.mp4 differ diff --git a/Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.gif b/Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.gif new file mode 100644 index 0000000..571ea6f Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.gif differ diff --git a/Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.png b/Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.png new file mode 100644 index 0000000..3387bea Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_challenge_info_day_2.3.png differ diff --git a/Khmer/images/projects/dom_mini_project_countries_day_6.1.gif b/Khmer/images/projects/dom_mini_project_countries_day_6.1.gif new file mode 100644 index 0000000..8a8f09a Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_countries_day_6.1.gif differ diff --git a/Khmer/images/projects/dom_mini_project_countries_object_day_10.1.gif b/Khmer/images/projects/dom_mini_project_countries_object_day_10.1.gif new file mode 100644 index 0000000..03b1e35 Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_countries_object_day_10.1.gif differ diff --git a/Khmer/images/projects/dom_mini_project_form_validation_day_10.2.1.png b/Khmer/images/projects/dom_mini_project_form_validation_day_10.2.1.png new file mode 100644 index 0000000..9d2c2b3 Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_form_validation_day_10.2.1.png differ diff --git a/Khmer/images/projects/dom_mini_project_form_validation_day_10.2.png b/Khmer/images/projects/dom_mini_project_form_validation_day_10.2.png new file mode 100644 index 0000000..ca7cdd5 Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_form_validation_day_10.2.png differ diff --git a/Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.gif b/Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.gif new file mode 100644 index 0000000..789d0cb Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.gif differ diff --git a/Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.png b/Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.png new file mode 100644 index 0000000..2956fa0 Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_leaderboard_day_8.1.png differ diff --git a/Khmer/images/projects/dom_mini_project_slider_day_7.1.gif b/Khmer/images/projects/dom_mini_project_slider_day_7.1.gif new file mode 100644 index 0000000..51bdadb Binary files /dev/null and b/Khmer/images/projects/dom_mini_project_slider_day_7.1.gif differ diff --git a/Khmer/images/raising_syntax_error.png b/Khmer/images/raising_syntax_error.png new file mode 100644 index 0000000..81f6245 Binary files /dev/null and b/Khmer/images/raising_syntax_error.png differ diff --git a/Khmer/images/regex.png b/Khmer/images/regex.png new file mode 100644 index 0000000..c7116b4 Binary files /dev/null and b/Khmer/images/regex.png differ diff --git a/Khmer/images/running_script.png b/Khmer/images/running_script.png new file mode 100644 index 0000000..deac13d Binary files /dev/null and b/Khmer/images/running_script.png differ diff --git a/Khmer/images/scripts_on_vscode.png b/Khmer/images/scripts_on_vscode.png new file mode 100644 index 0000000..f6257be Binary files /dev/null and b/Khmer/images/scripts_on_vscode.png differ diff --git a/Khmer/images/string_indexes.png b/Khmer/images/string_indexes.png new file mode 100644 index 0000000..cc2f638 Binary files /dev/null and b/Khmer/images/string_indexes.png differ diff --git a/Khmer/images/vscode.png b/Khmer/images/vscode.png new file mode 100644 index 0000000..724fc10 Binary files /dev/null and b/Khmer/images/vscode.png differ diff --git a/Khmer/images/vscode_ui.png b/Khmer/images/vscode_ui.png new file mode 100644 index 0000000..7210a08 Binary files /dev/null and b/Khmer/images/vscode_ui.png differ diff --git a/Khmer/images/web_storage.png b/Khmer/images/web_storage.png new file mode 100644 index 0000000..46f9311 Binary files /dev/null and b/Khmer/images/web_storage.png differ diff --git a/Khmer/readMe.md b/Khmer/readMe.md new file mode 100644 index 0000000..6ab756f --- /dev/null +++ b/Khmer/readMe.md @@ -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) | + +🧡🧡🧡 រីករាយក្នុងការសរសេរកូដ 🧡🧡🧡 + +
+គាំទ្រអ្នកនិពន្ធដើម្បីទទួលបានឯកសារសិក្សាបន្ថែមទៀត
+Paypal Logo +
+ +
+

30 ថ្ងៃនៃ JavaScript៖ ការណែនាំ

+ + + + + Twitter Follow + + +អ្នកនិពន្ធ: +Asabeneh Yetayeh
+ មករា, ២០២០ + + +
+ +🇬🇧 [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) + +
+ +
+ + +[ថ្ងៃទី ២ >>](./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 នេះ។ ប្រសិនបើអ្នកជាអ្នកសិក្សាដែលចូលចិត្តមើលរូបភាព អ្នកអាចទទួលបានមេរៀនវីដេអូនៅលើ Washera 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 + + + + 30DaysOfScript:Inline Script + + + + + +``` + +ឥឡូវនេះ អ្នកទើបតែសរសេរ script ជា inline script។ យើងអាចបង្កើតសារដាស់តឿនលេចឡើងដោយប្រើអនុគមន៍ _`alert()`_ ដែលភ្ជាប់មកជាមួយ JavaScript។ + +### Internal Script + +សម្រាប់ internal script គឺអាចសរសេរបាននៅក្នុង _`head`_ ឬ _`body`_ ប៉ុន្តែវាត្រូវបានគេពេញចិត្តក្នុងការដាក់វានៅលើ body នៃឯកសារ HTML ។ +ដំបូង​យើង​សរសេរ​នៅ​ផ្នែក​ head ​នៃ​គេហទំព័រ។ + +```html + + + + 30DaysOfScript:Internal Script + + + + +``` + +នេះជារបៀបដែលយើងសរសេរ internal script ភាគច្រើន។ ការសរសេរកូដ JavaScript នៅក្នុងផ្នែក body គឺជាជម្រើសដែលពេញចិត្តបំផុត។ អ្នកអាចបើក console នៅក្នុង browser ដើម្បីមើលលទ្ធផលពី `console.log()`។ + +```html + + + + 30DaysOfScript:Internal Script + + + + + + +``` + +បើក 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 + + + + 30DaysOfJavaScript:External script + + + + +``` + +External scripts នៅក្នុង _body_: + +```html + + + + 30DaysOfJavaScript:External script + + + + + + + + +``` + +បើក console នៅក្នុង browser ដើម្បីមើលលទ្ធផលនៃ `console.log()`។ + +### External Scripts ច្រើន + +យើងក៏អាចភ្ជាប់ឯកសារ JavaScript ខាងក្រៅជាច្រើនទៅគេហទំព័រមួយ។ +បង្កើតឯកសារ `helloworld.js` នៅខាងក្នុងថត 30DaysOfJS ហើយសរសេរកូដខាងក្រោម។ + +```js +console.log("Hello, World!"); +``` + +```html + + + + Multiple External Scripts + + + + + + +``` + +_ឯកសារ 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) diff --git a/readMe.md b/readMe.md index 2445614..16075d6 100644 --- a/readMe.md +++ b/readMe.md @@ -71,6 +71,7 @@ 🇻🇳 [Vietnamese](./Vietnamese/README.md) 🇵🇱 [Polish](./Polish/readMe.md) 🇧🇷 [Portuguese](./Portuguese/readMe.md) +🇰🇭 [Khmer](./Khmer/readMe.md)