สัปดาห์ที่ 7: JavaScript และเหตุการณ์ต่าง ๆ ของบราวเซอร์

»  การเขียนโปรแกรมภาษา Java Script (JS)

กิจกรรม: 1: การเขียนจาวาสคริปต์โดยใช้คุณสมบัติของ DOM

» จาวาสคริปต์ สามารถแทรกสคริปต์คำสั่งลงในแท็กต่าง ๆ ได้ พิจารณาตัวอย่างต่อไปนี้

<input id="button1" type="button" value="กิจกรรม 1">
<script>
  button1.onclick = function() {
    alert('กิจกรรม 1');
  };
</script>

ผลลัพธ์:

กิจกรรม: 2: การเขียนจาวาสคริปต์ลงในแท็ก

» จาวาสคริปต์ฝังลงในแอตทริบิวส์ภายในแท็กต่าง ๆ พิจารณาตัวอย่างต่อไปนี้

<input type="button" onclick="alert('กิจกรรม 2')" value="กิจกรรม 2">

ผลลัพธ์:

กิจกรรม: 3: เหตุการณ์เดียวกันไม่สามารถเขียนโค๊ดได้หลายที่

» พิจารณาตัวอย่างต่อไปนี้

<input type="button" id="button3" onclick="alert('Before')" value="กิจกรรม 3">
<script>
    button3.onclick = function() { // overwrites the existing handler
    alert('After'); // only this will be shown
  };
</script>

ผลลัพธ์:

กิจกรรม: 4: การใช้อิลิเมนต์ this

» this คือ อ็อบเจ็คที่กำลังทำงานในขณะนั้น พิจารณาตัวอย่างต่อไปนี้

<button onclick="alert(this.innerHTML)">กิจกรรม 4</button>

ผลลัพธ์:

กิจกรรม 4

กิจกรรม: 5: การเรียกชื่อฟังก์ชั่นผ่าน event ต้องไม่ใส่ ()

» ในการเรียกฟังก์ชั่นผ่าน event ต้องไม่ใส่เครื่องหมาย () หลังชื่อฟังก์ชั่น พิจารณาตัวอย่างต่อไปนี้

<input id="button5" type="button" value="กิจกรรม 5">

<script>
function function_5() {
  alert('กิจกรรม 5');
}
</script>

<script>
button5.onclick = function_5;
// เขียนชื่อฟังก์ชั่นลงท้ายด้วย () แบบนี้ไม่ได้ button.onclick = button5();  
</script>

ผลลัพธ์:

กิจกรรม: 6: การเขียนฟังก์ชั่นด้วยวิธี event

» การเขียนฟังก์ชั่นด้วย event พิจารณาตัวอย่างต่อไปนี้

<input id="button6" type="button" value="กิจกรรม 6">

<script>
function function_6() {
  alert('กิจกรรม 6');
}
</script>

<script>
button6.onclick = function() {
  function_6(); // <-- แยกฟังก์ชั่นออกไป
};
</script>

ผลลัพธ์:

กิจกรรม: 7: การใช้งาน addEventListener

» การสร้าง event ให้กับแท็ก ด้วย addEventListener พิจารณาตัวอย่างต่อไปนี้

<input id="button7" type="button" value="กิจกรรม 7">

<script>
function handler_7() {
  alert( 'กิจกรรม 7' );
}

button7.addEventListener("click", handler_7);
</script>

 ปล. การลบ event ออกจาก tag ให้ใช้คำสั่ง input.removeEventListener("click", handler); เช่น button7.removeEventListener("click", handler_7);

ผลลัพธ์:

กิจกรรม: 8: การใช้งาน addEventListener หลายฟังก์ชั่น

» การสร้าง event ให้กับแท็ก ด้วย addEventListener หลายครั้ง พิจารณาตัวอย่างต่อไปนี้

<input id="button8" type="button" value="กิจกรรม 8">

<script>
function handler_8_1() {
  alert( 'กิจกรรม 8 - handler 1' );
}

function handler_8_2() {
  alert( 'กิจกรรม 8 - handler 2' );
}

button8.onclick = ()=> alert("กิจกรรม 8");
button8.addEventListener("click", handler_8_1);
button8.addEventListener("click", handler_8_2);
</script>

 ปล. การลบ event ออกจาก tag ให้ใช้คำสั่ง input.removeEventListener("click", handler); เช่น button8.removeEventListener("click", handler_8);

ผลลัพธ์:

กิจกรรม: 9: เหตุการณ์บางอย่างใช้ได้เฉพาะ addEventListener

» เหตุการณ์บางอย่างใช้ได้เฉพาะ addEventListener พิจารณาตัวอย่างต่อไปนี้

//  will never run
document.onDOMContentLoaded = function() {
  alert("DOM built");
};

// this way it works
document.addEventListener("DOMContentLoaded", function() {
  alert("DOM built");
});

กิจกรรม: 10: เหตุการณ์ต่าง ๆ ของอ็อบเจ็ค

» เหตุการณ์ของอ็อบเจ็คมีอยู่หลายเหตุการณ์ เช่น keydown mousemove ฯลฯ พิจารณาตัวอย่างต่อไปนี้

<input id="button10" type="button" value="กิจกรรม 10">

<script>
  button10.onclick = function(event) {
    // show event type, element and coordinates of the click
    alert(event.type + " at " + event.currentTarget);
    alert("Coordinates: " + event.clientX + ":" + event.clientY);
  };
</script>

» event.type บอกว่าเหตุการณ์ที่กำลังดำเนินการเป็นชนิดอะไร ในตัวอย่างนี้ คือ 'click'
» event.currentTarget บอกอ็อบเจ็คที่กำลังแอคทีฟขณะนั้น
» event.clientX และ event.clientY บอกตำแหน่ง cursor
» เหตุการณ์ต่าง ๆ ภายใน event มีอีกหลายเหตุการณ์

ผลลัพธ์:

กิจกรรม: 11: การใช้งาน object handler: เพื่อควบคุมเหตุการณ์

» การใช้ object handlers พิจารณาตัวอย่างต่อไปนี้

<input id="button11" type="button" value="กิจกรรม 11">

<script>
  let obj = {
    handleEvent(event) {
      alert("กิจกรรม 11: " + event.type + " at " + event.currentTarget);
    }
  };

  button11.addEventListener('click', obj);
</script>

 ปล. การลบ event ออกจาก tag ให้ใช้คำสั่ง input.removeEventListener("click", handler); เช่น button11.removeEventListener("click", handler_11);

ผลลัพธ์:

กิจกรรม: 12: การใช้งาน object กับคลาสอื่น ๆ

» การใช้ object กับคลาสอื่น ๆ พิจารณาตัวอย่างต่อไปนี้

<input id="button12" type="button" value="กิจกรรม 12">

<script>
  class Menu12 {
    handleEvent(event) {
      switch(event.type) {
        case 'mousedown':
          button12.value = "กิจกรรม 12: Mouse button pressed";
          break;
        case 'mouseup':
          button12.value = "กิจกรรม 12: ...and released.";
          break;
      }
    }
  }

  let menu12 = new Menu12();

  button12.addEventListener('mousedown', menu12);
  button12.addEventListener('mouseup', menu12);
</script>

ผลลัพธ์:

กิจกรรม: 13: การใช้งาน object กับคลาสอื่น ๆ และไม่จำกัด event mousedown / mouseup

» การใช้ object กับคลาสอื่น ๆ พิจารณาตัวอย่างต่อไปนี้

<input id="button13" type="button" value="กิจกรรม 13">

<script>
  class Menu13 {
    handleEvent(event) {
      // mousedown -> onMousedown
      let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
      this[method](event);
    }

    onMousedown() {
      button13.value = "กิจกรรม 13: Mouse button pressed";
    }

    onMouseup() {
      button13.value = "กิจกรรม 13: ...and released.";
    }
  }


  let menu13 = new Menu13();

  button13.addEventListener('mousedown', menu13);
  button13.addEventListener('mouseup', menu13);
</script>

ผลลัพธ์:

กิจกรรม: 14: การแทรกเสียง

» การแทรกเสียงใช้แท็ก audio ดังนี้

<audio controls>
  <source src="articles/thamma/learning_and_punya.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

ผลลัพธ์:

กิจกรรม: 15: การแทรกวีดีโอ

» การแทรกวีดีโอใช้แท็ก video ดังนี้

<video width="100%" controls>
<source src="data/articles/multimedia/mp4/illustrator/illustrator-split-shape.mp4">
</video>

ผลลัพธ์:

กิจกรรม: 16: การแทรกวีดีโอ Youtube

» การแทรกหน้าเว็บอื่นใช้แท็ก iframe 
» เปิด youtube -> เลือกวีดีโอ -> กด share -> embedded -> คัดลอกโค๊ดมาใส่ในเว็บ

<iframe width="560" height="315" src="https://www.youtube.com/embed/14O7AxqjiVY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

ผลลัพธ์:

กิจกรรม: 17: การแทรก desmos

» การแทรกหน้าเว็บอื่นใช้แท็ก iframe 
» เปิด desmos.com จากนั้นสร้างสมการ sin(x) และ cos(2x)

<iframe src="https://www.desmos.com/calculator/1a0yi1ujfj" width="100%" height="450"></iframe>

ผลลัพธ์:

กิจกรรม: 18: การแทรกแผนที่ Google map

» เข้าไปที่ map.google.com -> ไปตำแหน่งที่ต้องการ
» เลือกเมนูด้านซ้ายบน -> แชร์หรือฝังแผนที่ -> เลือกฝังแผนที่

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15322.144326452384!2d103.25481624999999!3d16.24427265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sth!2sth!4v1673940294785!5m2!1sth!2sth" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

ผลลัพธ์:

กิจกรรม: 19: การแทรก Latex

» Latex คือ ภาษาที่ใช้เขียนสมการคณิตศาสตร์ ต้องอิมพอร์ตไลบรารี่ก่อนการใช้งาน ดังนี้

<head>
<script type="text/javascript" src="js/j-syntax/scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/j-syntax/scripts/jquery.syntaxhighlighter.js"></script>
<script type="text/javascript">$.SyntaxHighlighter.init();</script>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  extensions: ["tex2jax.js"],
  jax: ["input/TeX","output/HTML-CSS"],
  tex2jax: {
    inlineMath: [["\(","\)"]], displayMath: [['$$','$$']],
    skipTags: ["script","noscript","style","textarea"],
    processEscapes: true,
    processEnvironments: true
  }
});
</script>
</head>

<h3>\ ( x^{2} + 2x \ ) </h3>

ผลลัพธ์:

\(x^{2}+2x\)

		<div id="stl_cont" ></div>

		<script src="https://www.viewstl.com/plugin/examples/stl_viewer.min.js"></script>		
		<script>
			var stl_viewer=new StlViewer
			(
				document.getElementById("stl_cont"),
				{
					models:
					[
						{filename:"welcome.stl"}
					]
				}
			);
		</script>

แหล่งข้อมูลเพิ่มเติม

» https://fr.javascript.info/events
» https://getbootstrap.com/docs/4.0/components/dropdowns/