<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "e982871b8388c59c22a41b73b5fca70f",
  "translation_date": "2025-08-27T22:45:02+00:00",
  "source_file": "4-typing-game/typing-game/README.md",
  "language_code": "my"
}
-->
# အဖြစ်အပျက်များကို အသုံးပြု၍ ဂိမ်းတစ်ခု ဖန်တီးခြင်း

## မိန့်ခွန်းမပြောမီ စစ်ဆေးမေးခွန်း

[မိန့်ခွန်းမပြောမီ စစ်ဆေးမေးခွန်း](https://ff-quizzes.netlify.app/web/quiz/21)

## အဖြစ်အပျက်အခြေပြု ပရိုဂရမ်ရေးသားမှု

Browser အခြေပြု အက်ပ်လီကေးရှင်းတစ်ခု ဖန်တီးရာတွင် အသုံးပြုသူများအတွက် ဂရပ်ဖစ်အသုံးပြုသူအင်တာဖေ့စ် (GUI) တစ်ခုကို ပံ့ပိုးပေးရမည်ဖြစ်သည်။ Browser နှင့် အပြန်အလှန်ဆက်သွယ်ရာတွင် အများဆုံးအသုံးပြုသောနည်းလမ်းမှာ အမျိုးမျိုးသောအရာများကို နှိပ်ခြင်းနှင့် ရိုက်ထည့်ခြင်းဖြစ်သည်။ Developer အနေဖြင့် ကျွန်ုပ်တို့ကြုံရသော စိန်ခေါ်မှုမှာ သူတို့သည် အချိန်မရွေး အဲဒီလုပ်ဆောင်မှုများကို ပြုလုပ်မည်ကို မသိနိုင်ခြင်းဖြစ်သည်။

[အဖြစ်အပျက်အခြေပြု ပရိုဂရမ်ရေးသားမှု](https://en.wikipedia.org/wiki/Event-driven_programming) သည် ကျွန်ုပ်တို့၏ GUI ကို ဖန်တီးရန် လိုအပ်သော ပရိုဂရမ်ရေးသားမှုအမျိုးအစားအတွက် အမည်ဖြစ်သည်။ ဒီစကားစုကို နည်းနည်းခွဲစိတ်ကြည့်ပါက အဓိကစကားလုံးမှာ **အဖြစ်အပျက်** ဖြစ်သည်ကို တွေ့ရမည်။ Merriam-Webster အဆိုအရ [အဖြစ်အပျက်](https://www.merriam-webster.com/dictionary/event) ကို "တစ်ခုခုဖြစ်ပျက်ခြင်း" ဟု အဓိပ္ပါယ်ဖွင့်ဆိုထားသည်။ ဒါက ကျွန်ုပ်တို့ရဲ့ အခြေအနေကို အတိအကျ ဖော်ပြထားတာဖြစ်ပါတယ်။ ကျွန်ုပ်တို့သည် တစ်ခုခုဖြစ်ပျက်မည်ကို သိပြီး၊ အဲဒီအတွက် ကုဒ်တစ်ခုကို တုံ့ပြန်အကောင်အထည်ဖော်လိုသော်လည်း၊ အဲဒါ ဘယ်အချိန်မှာ ဖြစ်မည်ကို မသိနိုင်ပါ။

ကျွန်ုပ်တို့ အကောင်အထည်ဖော်လိုသည့် ကုဒ်ပိုင်းကို သတ်မှတ်ရန် နည်းလမ်းမှာ function တစ်ခု ဖန်တီးခြင်းဖြစ်သည်။ [Procedural programming](https://en.wikipedia.org/wiki/Procedural_programming) အတွင်း function များကို အတိအကျ အစဉ်လိုက် ခေါ်သုံးရသည်ဟု တွေးပါ။ အဖြစ်အပျက်အခြေပြု ပရိုဂရမ်ရေးသားမှုတွင်လည်း အဲဒီအရာတူညီပါသည်။ ကွာခြားချက်မှာ function များကို **ဘယ်လို** ခေါ်သုံးမည်ဆိုတာပဲ ဖြစ်သည်။

အဖြစ်အပျက်များ (button နှိပ်ခြင်း၊ ရိုက်ထည့်ခြင်း စသည်) ကို ကိုင်တွယ်ရန် ကျွန်ုပ်တို့သည် **အဖြစ်အပျက်နားထောင်သူများ** (event listeners) ကို မှတ်ပုံတင်ရမည်။ အဖြစ်အပျက်နားထောင်သူသည် အဖြစ်အပျက်တစ်ခု ဖြစ်ပေါ်လာသည်ကို နားထောင်ပြီး၊ အဲဒီအတွက် တုံ့ပြန်မှုအနေဖြင့် လုပ်ဆောင်မှုတစ်ခုကို အကောင်အထည်ဖော်သည်။ အဖြစ်အပျက်နားထောင်သူများသည် UI ကို အပ်ဒိတ်လုပ်ခြင်း၊ server ကို ခေါ်ဆိုခြင်း သို့မဟုတ် အသုံးပြုသူ၏ လုပ်ဆောင်မှုအတွက် လိုအပ်သော အခြားအရာများကို ပြုလုပ်နိုင်သည်။ ကျွန်ုပ်တို့သည် [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ကို အသုံးပြု၍ အဖြစ်အပျက်နားထောင်သူကို ထည့်သွင်းပြီး၊ လုပ်ဆောင်ရန် function ကို ပံ့ပိုးပေးသည်။

> **NOTE:** အဖြစ်အပျက်နားထောင်သူများကို ဖန်တီးရန် နည်းလမ်းများစွာ ရှိသည်ကို သတိပြုပါ။ သင်သည် anonymous functions ကို အသုံးပြုနိုင်သလို၊ အမည်ပေးထားသော function များကိုလည်း ဖန်တီးနိုင်သည်။ `click` property ကို သတ်မှတ်ခြင်း၊ သို့မဟုတ် `addEventListener` ကို အသုံးပြုခြင်းကဲ့သို့သော shortcut များကိုလည်း အသုံးပြုနိုင်သည်။ ကျွန်ုပ်တို့၏ လေ့ကျင့်ခန်းတွင် `addEventListener` နှင့် anonymous functions ကို အဓိကထားမည်ဖြစ်သည်၊ အကြောင်းမှာ ဒါဟာ web developers များအကြား အများဆုံးအသုံးပြုသော နည်းလမ်းဖြစ်ပြီး၊ အလွန်ပြောင်းလွယ်ပြင်လွယ်သော နည်းလမ်းဖြစ်သည်။ `addEventListener` သည် အဖြစ်အပျက်အားလုံးအတွက် အလုပ်လုပ်နိုင်ပြီး၊ အဖြစ်အပျက်အမည်ကို parameter အဖြစ် ပံ့ပိုးပေးနိုင်သည်။

### ရိုးရိုးတွေ့ရသော အဖြစ်အပျက်များ

[အဖြစ်အပျက်များ](https://developer.mozilla.org/docs/Web/Events) အများအပြားကို သင်၏ အက်ပ်လီကေးရှင်း ဖန်တီးရာတွင် နားထောင်နိုင်သည်။ စာမျက်နှာပေါ်တွင် အသုံးပြုသူတစ်ဦး ပြုလုပ်သည့် အရာတိုင်းသည် အဖြစ်အပျက်တစ်ခုကို ဖြစ်ပေါ်စေပြီး၊ သင်၏ အသုံးပြုသူများအတွက် လိုအပ်သော အတွေ့အကြုံကို ပံ့ပိုးပေးရန် အလွန်အာဏာရှိသည်။ ကံကောင်းစွာ၊ သင်သည် အဖြစ်အပျက်အနည်းငယ်သာ လိုအပ်လိမ့်မည်။ ဂိမ်းဖန်တီးရာတွင် အသုံးပြုမည့် အဖြစ်အပျက်များအနက် အချို့ကို အောက်တွင် ဖော်ပြထားသည်-

- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): အသုံးပြုသူသည် button သို့မဟုတ် hyperlink တစ်ခုကို နှိပ်ခြင်း
- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): အသုံးပြုသူသည် ညာဘက်မောက်စ်ခလုတ်ကို နှိပ်ခြင်း
- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): အသုံးပြုသူသည် စာသားတစ်ခုကို highlight ပြုလုပ်ခြင်း
- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): အသုံးပြုသူသည် စာသားတစ်ခုကို ရိုက်ထည့်ခြင်း

## ဂိမ်းဖန်တီးခြင်း

ကျွန်ုပ်တို့သည် JavaScript တွင် အဖြစ်အပျက်များ အလုပ်လုပ်ပုံကို လေ့လာရန် ဂိမ်းတစ်ခု ဖန်တီးမည်။ ဂိမ်းသည် developer များအတွက် အရေးကြီးသော typing ကျွမ်းကျင်မှုကို စမ်းသပ်မည်ဖြစ်သည်။ Developer အားလုံးသည် typing ကျွမ်းကျင်မှုကို လေ့ကျင့်ထားသင့်သည်။ ဂိမ်း၏ အခြေခံစီးဆင်းမှုမှာ အောက်ပါအတိုင်းဖြစ်သည်-

- Player သည် start button ကို နှိပ်ပြီး ရိုက်ရန် စာပိုဒ်တစ်ခုကို ကြည့်ရှုရမည်
- Player သည် စာပိုဒ်ကို အမြန်ဆုံး ရိုက်ရမည်
  - စကားလုံးတစ်လုံးပြီးတိုင်း နောက်တစ်လုံးကို highlight ပြုလုပ်မည်
  - Player တွင် စာလုံးပေါင်းအမှားရှိပါက textbox ကို အနီရောင်ပြောင်းမည်
  - Player သည် စာပိုဒ်ကို ပြီးမြောက်ပါက အောင်မြင်မှုစာသားနှင့် ကြာချိန်ကို ပြသမည်

အခု ကျွန်ုပ်တို့၏ ဂိမ်းကို ဖန်တီးပြီး၊ အဖြစ်အပျက်များကို လေ့လာကြစို့!
- [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ကို အသုံးပြုပြီး အမြင့်ဆုံးအမှတ်များကို သိမ်းဆည်းပါ။

## မိန့်ခွန်းပြီးနောက် မေးခွန်းများ

[မိန့်ခွန်းပြီးနောက် မေးခွန်းများ](https://ff-quizzes.netlify.app/web/quiz/22)

## ပြန်လည်သုံးသပ်ခြင်းနှင့် ကိုယ်တိုင်လေ့လာခြင်း

[ဝဘ်ဘရောက်ဆာမှတဆင့်](https://developer.mozilla.org/docs/Web/Events) ဖွင့်နိုင်သော အဖြစ်အပျက်များအားလုံးကို ဖတ်ရှုပါ၊ သင့်အနေဖြင့် တစ်ခုချင်းစီကို မည်သည့်အခြေအနေတွင် အသုံးပြုမည်ကို စဉ်းစားပါ။

## အိမ်စာ

[ကီးဘုတ်ဂိမ်းအသစ်တစ်ခု ဖန်တီးပါ](assignment.md)

---

**အကြောင်းကြားချက်**:  
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မတိကျမှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းစာရွက်စာတမ်းကို ၎င်း၏ မူလဘာသာစကားဖြင့် အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် ရှုလေ့လာသင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ပရော်ဖက်ရှင်နယ် ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအလွတ်များ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။