តើ «ហេតុការណ៍» ជាអ្វីទៅ? យោងតាមនិយមន័យទូទៅ «ហេតុការណ៍» (event) គឺជារឿងរ៉ាវទាំងឡាយណាដែលកើតមានឡើងដោយមិនបានដឹងជាមុន ឧទាហរណ៍ដូចជា ការត្រូវឆ្នោត ការជួបមិត្តសំលាញ់ចាស់ជាចៃដន្យជាដើម។
ទន្ទឹមនឹងនេះ មានរបៀបជាច្រើននៅក្នុងការសរសេរកម្មវិធីកំព្យូទ័រ ហើយក្នុងចំណោមរបៀបទាំងនោះ មានរបៀបសរសេរកម្មវិធីម៉្យាងហៅថា Event-Driven Programming ដែលអាចត្រូវបកប្រែជាភាសាខ្មែរមកថា ការសរសរកម្មវិធីដោយយោងលើ «ហេតុការណ៍» ឬអាចនិយាយបានម៉្យាងទៀតថា កម្មវិធីមានដំណើរការអាស្រ័យទៅលើ «ហេតុការណ៍» ផ្សេងៗដែលកើតមានឡើងដោយសារអ្នកប្រើប្រាស់កម្មវិធីចុចនេះឬចុចនោះ។
សំរាប់អ្នកប្រើប្រាស់កម្មវិធីកំព្យូទ័រនិទូរស័ព្ទដៃ រឿងនេះមិនមែនជារឿងថ្មីនោះទេ គឺជាទំលាប់របស់ពួកគេទៅហើយនូវការចុចនេះឬចុចនោះដើម្បីចង់បើកមើលអ្វីម៉្យាងនោះ។ ក៏ប៉ុន្តែ សំរាប់អ្នកសរសេរកម្មវិធីសំរាប់ឧបករណ៍អេឡិចត្រូនិក នៅពេលដែលអ្នកប្រើប្រាស់ចុចនេះឬចុចនោះ គឺជាការបង្កើត «ហេតុការណ៍» ផ្សេងៗអោយកើតមានឡើងនៅក្នុងកម្មវិធី។
ដូចនេះ នៅពេលដែលអ្នកប្រើប្រាស់ចុចអ្វីម៉្យាង «ហេតុការណ៍» មួយនឹងកើតមានឡើង ហើយកម្មវិធីកំព្យូទ័រនិងទូរស័ព្ទដៃនឹងដំណើរការរួចផ្តល់នូវលទ្ធផលអ្វីម៉្យាងដែរ ដើម្បីឆ្លើយតបទៅនឹង «ហេតុការណ៍» ដែលបានកើតមានឡើងនោះ។ សរុបមក ការសរសេរកម្មវិធីដើម្បីឆ្លើយតបទៅនឹងការចុចផ្សេងៗរបស់អ្នកប្រើប្រាស់ ហៅថា ការសរសេរកម្មវិធីដោយយោងលើ «ហេតុការណ៍» ។
មួយវិញទៀត សំរាប់កម្មវិធីកំព្យូទ័រនិងទូរស័ព្ទដៃ «ហេតុការណ៍» មិនមែនកើតឡើងដោយសារតែអ្នកប្រើប្រាស់ចុចនេះឬចុចនោះតែមួយមុខនោះទ កម្មវិធីខ្លួនឯងក៏អាចបង្កើតនូវ «ហេតុការណ៍» ផ្សេងៗបានដែរ។ ជាក់ស្តែង នៅពេលដែលប្រដាប់មើលវីដេអូ YouTube ចាប់ផ្តើមដំណើរការ វានឹងបង្កើតនូវ «ហេតុការណ៍» មួយហៅថា «YT.PlayerState.PLAYING» ដែលយើងអាចសរសេរកម្មវិធីមួយចំនួនអោយដំណើរការ ដើម្បីឆ្លើយតបទៅនឹងហេតុការណ៍ «YT.PlayerState.PLAYING» នេះ។
ឧបមាថា នៅពេលដែលប្រដាប់មើលវីដេអូ YouTube ចាប់ផ្តើមដំណើរការ ដែលជាកត្តាធ្វើអោយហេតុការណ៍ «YT.PlayerState.PLAYING» កើតមានឡើង យើងចង់អោយ browser ដូរពណ៌ទៅជាខ្មៅជាស្វ័យប្រវត្តិ ដើម្បីអាចមើលវីដេអូដោយមិនចាំងភ្នែក។ ដើម្បីសំរេចបានគោលបំណងនេះ យើងត្រូវសរសេរកម្មវិធីដូចខាងក្រោមនេះ៖
<style>
/*កូដខាងក្រោមនេះ គឺជា css ចាំបាច់សំរាប់រចនា menu នៅខាងក្រោម
ដែលនៅក្នុងនោះមានពក្យថា «លេង» «សំរាក» និង «ឈប់»។*/
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover{
background-color: #111;
cursor:pointer;
}
</style>
<!--ធាតុ div ទាំងពីរខាងក្រោមនេះ គឺជាធាតុចាំបាច់សំរាប់បង្កើតប្រដាប់ចាក់វីដេអូ YouTube ថ្មីមួយ
ដែលមានអត្តសញ្ញាណជា «player»។-->
<div style="position:relative;padding-top:56.25%;">
<div id="player" style="position:absolute;top:0;left:0;"></div>
</div>
<!--បណ្តាធាតុខាងក្រោមនេះ គឺជាការបង្កើត menu សំរាប់ ចាក់ សំរាក និង បញ្ឍប់វីដេអូ ។-->
<ul>
<li><a onclick="play()">លេង</a></li>
<li><a onclick="pause()">សំរាក</a></li>
<li><a onclick="stop()">ឈប់</a></li>
</ul>
<script>
/*កូដខាងក្រោមនេះ គឺជាការចំលងយកក្បួនខ្នាតសំខាន់ៗនៅ
នៅក្នុងប្រព័ន្ធ YouTube យកមកប្រើទាក់ទងនឹងប្រដាប់ចាក់វីដេអូ*/
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/*កូដខាងក្រោមនេះ គឺជាការយក្បួនខ្នាតនៅក្នុងប្រព័ន្ធ YouTube
យកមកបង្កើតប្រដាប់ចាក់វីដេអូថ្មីមួយដាក់ចូលទៅក្នុងធាតុដែលមាន
អត្តសញ្ញាណជា «player» នៅខាងលើ។*/
var player;
function onYouTubeIframeAPIReady(){
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: 'M7lc1UVf-VE',
playerVars: {
controls: 0
},
events: {
/*ការតភ្ចាប់ហេតុការណ៍ «onStateChange» កើតឡើងពីការផ្លាស់សភាពលក្ខណៈ
របស់ប្រដាប់មើលវីដេអូ YouTube ទៅនឹងក្បួន «onPlayerStateChange» ។*/
'onStateChange': onPlayerStateChange
}
});
}
/*ក្បួន «onPlayerStateChange» ដែលនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ
នៅពេលដែលហេតុការណ៍ «onStateChange» កើតមានឡើង*/
function onPlayerStateChange(event) {
if(event.data == YT.PlayerState.PLAYING){
/*បើប្រដាប់មើលវីដេអូមានមានសភាពជាកំពុងលេង
បញ្ជានៅខាងក្រោមនេះនឹងយកទៅអនុវត្ត។*/
$('.main-outer').css("background-color","black");
}else if(event.data == YT.PlayerState.PAUSED){
/*បើប្រដាប់មើលវីដេអូស្ថិតក្នុងសភាពសំរាក
បញ្ជានៅខាងក្រោមនេះនឹងយកទៅអនុវត្ត។*/
$('.main-outer').css("background-color","#ffffff");
}else if(event.data == YT.PlayerState.ENDED){
/*បើប្រដាប់មើលវីដេអូមានមានសភាពជាលេងចប់
បញ្ជានៅខាងក្រោមនេះនឹងយកទៅអនុវត្ត។*/
$('.main-outer').css("background-color","#ffffff");
}
}
/*ក្បួនទាំងបីខាងក្រោមនេះ ប្រើសំរាប់ឆ្លើយតប
ទៅនឹងការចុច menu ដែលជាពាក្យថា «លេង» «សំរាក» និង «ឈប់» ។*/
function stop(){
player.stopVideo();
}
function play(){
player.playVideo();
}
function pause(){
player.pauseVideo();
}
</script>
តំណរភ្ជាប់ទៅកាន់កម្មវិធីសរសេរឡើងដោយកូដខាងលើៈ
https://www.khmerweb.app/2019/03/youtube_16.html
នៅបន្ទាត់លេខ 37 ការសរសេរថា 'onStateChange': onPlayerStateChange គឺជាការភ្ជាប់ហេតុការណ៍ «onStateChange» ទៅនឹងក្បួន «onPlayerStateChange» ។ ដូចនេះនៅពេលដែលប្រដាប់មើលវីដេអូ YouTube ផ្លាស់ប្តូរសភាពរបស់វា ហេតុការណ៍ «onStateChange» នឹងកើតមានឡើងជាស្វ័យប្រវត្តិ ដែលនឹងជាហេតុបណ្តាលអោយក្បួនឈ្មោះ «onPlayerStateChange» នេះ នឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិដែរ។
ក្នុងករណីប្រដាប់មើលវិដេអូផ្លាស់ប្តូរសភាពរបស់វាទៅជាសភាពកំពុងលេង ដែលមានតំលៃស្មើនឹង YT.PlayerState.PLAYING បញ្ជានៅបន្ទាត់លេខ 48 នឹងត្រូវយកទៅអនុវត្ត ដែលនឹងធ្វើអោយផ្ទៃរបស់ browser ប្រែពណ៌ជាខ្មៅ។
ក្នុងករណីប្រដាប់មើលវិដេអូផ្លាស់ប្តូរសភាពរបស់វាទៅជាសភាពសំរាក ដែលមានតំលៃស្មើនឹង YT.PlayerState.PAUSE បញ្ជានៅបន្ទាត់លេខ 52 នឹងត្រូវយកទៅអនុវត្ត ដែលនឹងធ្វើអោយផ្ទៃរបស់ browser ប្រែពណ៌ជាសវិញ។
ក្នុងករណីប្រដាប់មើលវិដេអូផ្លាស់ប្តូរសភាពរបស់វាទៅជាសភាពលេងចប់ ដែលមានតំលៃស្មើនឹង YT.PlayerState.ENDED បញ្ជានៅបន្ទាត់លេខ 56 នឹងត្រូវយកទៅអនុវត្ត ដែលនឹងធ្វើអោយផ្ទៃរបស់ browser ប្រែពណ៌ជាសវិញ។