Khmer Web: Browser Object Model

នៅក្នុងបរិបទនៃ browser វត្ថុមានស្រាប់នានានៅក្នុងភាសា JS ត្រូវបានចែកចេញជាច្រើនផ្នែក និងត្រូវបានតំរៀបទៅតាមឋានានុក្រមមួយដ៏ច្បាស់លាស់ដូចនៅក្នុងរូបខាងក្រោមនេះ៖

នៅក្នុងឋានុក្រមនេះ DOM ជាអក្សរកាត់មកពីពាក្យថា Document Object Model ដែលជាវត្ថុដែលជាផ្នែកដ៏សំខាន់មួយនៅក្នុងភាសា JS ព្រោះវាផ្តល់លទ្ធភាពអោយយើងអាចប្រើប្រាស់កម្មវិធី JS ផ្សេងៗ ក្នុងការកែច្នៃនិងឬរចនាធាតុ HTML ទាំងឡាយនៅក្នុងទំព័រ HTMLនានា។

ចំណែកឯពាក្យថា BOM វិញ មកពីពាក្យថា Browser Object Model គឺជាវត្ថុដែលជាផ្នែកមួយទៀតនៃភាសា JS ដែលនៅក្នុងនោះមានក្បួនខ្នាតទាំងឡាយពាក់ព័ន្ធនឹងការបង្កើតនិងឬរចនាបង្អួចរបស់ browser និងក្បួនខ្នាតដទៃទៀតទាក់ទងនឹង navigator, screen, location, frames, history, និង XMLHttpRequest ។

យ៉ាងណាម៉ិញ ទោះជាវត្ថុ window ជាផ្នែកនៅខាងលើគេយ៉ាងណាក៏ដោយ ក៏ក្បួនខ្នាតនៅក្នុងនោះ ត្រូវចាត់ថាស្ថិតនៅក្នុងផ្នែក BOM ដែរ។ អាស្រ័យហេតុនេះ យើងអាចយកក្បួនខ្នាតទាក់ទងនឹងទំហំរបស់បង្អួចផ្សេងៗនៅក្នុង browser មកប្រើដូចខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Odor+Mean+Chey' rel='stylesheet'>
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">
  	
    <script>
		var width = window.innerWidth;
		var height = window.innerHeight;

		var element = document.getElementById("demo");
		element.innerHTML = "ប្រវែងបណ្តោយរបស់ browser គឺ: " + width + ", កំពស់គឺ: " + height + "។";
    </script>
  </body>
</html>

នៅលើបន្ទាត់លេខ 9 គឺជាការយកវិធីឈ្មោះ innerWidth() នៅក្នុងវត្ថុដែលជាផ្នែក window មកប្រើការដើម្បីចំលងយកប្រវែងបណ្តោយរបស់ browser ។

នៅលើបន្ទាត់លេខ 10 គឺជាការយកវិធីឈ្មោះ innerHeight() នៅក្នុងវត្ថុដែលជាផ្នែក window មកប្រើការដើម្បីចំលងយកប្រវែងកំពស់របស់ browser ។

មួយវិញទៀត ក្នុងករណីយើងចង់បង្កើតផ្ទាំងបង្អួចរបស់ browser ថ្មីៗទៀត យើងត្រូវយកវិធីឈ្មោះ open() នៅក្នុងវត្ថុដែលជាផ្នែក window មកប្រើ ហើយបើយើងចង់បិទបង្អួចណាមួយ យើងត្រូវយកវិធីឈ្មោះ close មកប្រើ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Odor+Mean+Chey' rel='stylesheet'>
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">
  	<input type="button" id="btn-open" value="បង្កើតបង្អួច" />
    <input type="button" id="btn-close" value="បិទបង្អួច" />
    <script>
		var myWindow = null;

      	function openWindow(){
        	myWindow = window.open("", "", "width=500, height=300, left=200");
        	myWindow.document.write("នេះជាបង្អួច browser ថ្មីមួយទៀត។");
        	myWindow.document.title = "បង្អួចថ្មី";
     	 }

     	 function closeWindow(){
        	myWindow.close();
     	 }

      	var btnOpen = document.getElementById("btn-open");
      	btnOpen.addEventListener("click", openWindow);

     	var btnClose = document.getElementById("btn-close");
      	btnClose.addEventListener("click", closeWindow);
    </script>
  </body>
</html>

នៅលើបន្ទាត់លេខ 13 គឺជាការយកវិធីឈ្មោះ open() នៅក្នុងវត្ថុដែលជាផ្នែក window មកប្រើ ដើម្បីបង្កើតបង្អួច browser មួយថ្មីទៀត។

នៅលើបន្ទាត់លេខ 19 គឺជាការយកវិធីឈ្មោះ close() នៅក្នុងវត្ថុដែលជាផ្នែក window មកប្រើ ដើម្បីបិទបង្អួចដែលត្រូវបានបង្កើតឡើងនោះ។

មួយវិញទៀត បើសិនជាយើងចង់ផ្លាស់ប្តូរទីតាំងនិងផ្លាស់ប្តូរទំហំរបស់បង្អួចណាមួយនោះ យើងត្រូវប្រើវិធី moveTo() និងឬវិធី resizeTo() រៀងគ្នា។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Odor+Mean+Chey' rel='stylesheet'>
  </head>
  <body style="font:14px/1.5 'Odor Mean Chey'">
  	<input type="button" id="btn-open" value="បង្កើត" />
    <input type="button" id="btn-move" value="ផ្លាស់ទី" />
    <input type="button" id="btn-resize" value="ដូរទំហំ" />
    <script>
		var myWindow = null;

      	function openWindow(){
        	myWindow = window.open("", "", "width=500, height=300");
        	myWindow.document.write("នេះជាបង្អួច browser ថ្មីមួយទៀត។");
        	myWindow.document.title = "បង្អួចថ្មី";
      	}

      	function moveWindow(){
        	myWindow.moveTo(100, 200);
      	}

      	function resizeWidow(){
        	myWindow.resizeTo(700, 500);
      	}

      	var btnOpen = document.getElementById("btn-open");
      	btnOpen.addEventListener("click", openWindow);

      	var btnMove = document.getElementById("btn-move");
      	btnMove.addEventListener("click", moveWindow);

      	var btnResize = document.getElementById("btn-resize");
      	btnResize.addEventListener("click", resizeWidow);
    </script>
  </body>
</html>

នៅលើបន្ទាត់លេខ 20 គឺជាការយកវិធី window.moveTo() មកប្រើ ដើម្បីផ្លាស់ទីបង្អួចទៅកាន់ចំនុចមានទីតាំង (100, 200) ។

នៅលើបន្ទាត់លេខ 24 គឺជាការយកវិធី window.resizeTo() មកប្រើដើម្បីផ្លាស់ប្តូរទំហំរបស់បង្អួចដែលត្រូវបានបង្កើតឡើង៕