มินิโปรเจกต์: หัวหรือก้อย

ในโปรเจกต์นี้ เราจะสร้างโปรแกรมที่จำลองการโยนเหรียญ

ตัวอย่าง:

index.html

ลองเล่นกับตัวอย่างข้างบนดู

1. กดที่ปุ่ม “Flip a coin”
2. จะแสดงหน้าต่างป๊อปอัพขึ้นมา แสดงผลลัพธ์ว่า Heads (หัว) หรือ Tails (ก้อย)

เรื่องที่เราจะเรียนรู้ในโปรเจกต์นี้

• ในโปรเจกต์นี้ เราจะได้รู้จักกับการใช้งาน if-else

ขึ้นหน้าเว็บ

• เริ่มจากสร้างหน้าเว็บตามนี้

  <h1>Coin Flipper</h1>
  <input type="button" id="flip" value="Flip a coin">
  <script>
    let flip = document.getElementById('flip')
    flip.onclick = () => {
      // เดี๋ยวเราจะเขียนโค้ดในส่วนนี้
    }
  </script>

สุ่มหัว–ก้อย

• เราจะนำฟังก์ชัน Math.random() กลับมาใช้อีกครั้ง

• อย่างที่กล่าวไปในตอนก่อนหน้า Math.random() จะสุ่มเลขทศนิยมที่ ≥ 0 แต่ < 1

• โดยวิธีที่ฟังก์ชัน Math.random() สุ่มเลข แต่ละเลขจะมีโอกาสถูกสุ่มขึ้นมาเท่าๆ กัน^[1]

• นั่นหมายความว่า

  • มีโอกาส 50% ที่จะได้เลขที่ < 0.5
  • และมีโอกาส 50% ที่จะได้เลขที่ ≥ 0.5

• เราสามารถเขียนเงื่อนไขได้แบบนี้

  Math.random() < 0.5?

  • true → Heads (ออกหัว)
  • false → Tails (ออกก้อย)

  

เอาเงื่อนไขมาเขียนเป็น JavaScript

• แก้โค้ดของ flip.onclick ให้เป็นแบบนี้

  flip.onclick = () => {
    let randomNumber = Math.random()
    if (randomNumber < 0.5) {
      alert('Heads')
    } else {
      alert('Tails')
    }
  }

  ตรวจสอบผลลัพธ์

  1. เปิดเว็บที่สร้างขึ้นมา
  2. กดปุ่ม “Flip a coin”
  3. จะแสดงหน้าต่างป๊อปอัพขึ้นมา แสดงผลลัพธ์ว่า Heads (หัว) หรือ Tails (ก้อย)
  4. ลองซ้ำหลายๆ รอบ เพื่อดูว่าผลลัพธ์ที่ได้เป็นอย่างไร

if–else

• ในตัวอย่างข้างบน เราใช้คำสั่ง if และ else เพื่อเขียนเงื่อนไข ซึ่งมีรูปแบบดังนี้

  if (randomNumber < 0.5) {
    alert('Heads')
  } else {
    alert('Tails')
  }

• และ if–else จะเป็นหัวข้อของตอนต่อไปครับ

---

1. กล่าวคือ ฟังก์ชันนี้ มีการแจกแจงความน่าจะเป็นในรูปแบบที่เรียกว่า “uniform distribution” (หรือภาษาไทยเรียกว่า การแจกแจงเอกรูป) ↩︎