มินิโปรเจกต์: โปรแกรมสุ่มเลข

ในโปรเจกต์นี้ เราจะสร้างโปรแกรมสุ่มเลขอย่างง่ายๆ กัน

ตัวอย่าง:

index.html

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

กดที่ปุ่ม “Randomize”
เมื่อกดแล้ว กล่องข้อความจะแสดงเลขที่สุ่มได้ ตั้งแต่ 1 ถึง 10

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

ในโปรเจกต์นี้ เราจะเรียนรู้เกี่ยวกับสองฟังก์ชัน คือ:
1. Math.random()
2. Math.floor(…)

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

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

html

<h1>Randomizer</h1>

<input id="number" size="5">
<input type="button" id="randomize" value="Randomize">

<script>
  let number = document.getElementById('number')
  let randomize = document.getElementById('randomize')
  randomize.onclick = () => {
    // เดี๋ยวเราจะเขียนโค้ดในส่วนนี้
  }
</script>

รู้จักกับ Math.random

ใน JavaScript มีฟังก์ชันที่ชื่อว่า Math.random()
เมื่อเราเรียกใช้งานฟังก์ชันนี้ คอมพิวเตอร์จะสุ่มเลขมาให้ โดยเลขที่ได้นั้นจะมีค่ามากกว่าหรือเท่ากับ 0 และน้อยกว่า 1 (กล่าวคือ อยู่ในช่วง [0, 1))
```
Math.random()""
```
แต่ละครั้งที่คำสั่งนี้ทำงาน ก็จะได้ผลลัพธ์ที่แตกต่างกันออกไป
ฟังก์ชัน Math.random() คืนค่ากลับมาเป็นเลขทศนิยม แต่เราอยากได้ตัวเลขสุ่ม เป็นจำนวนเต็ม ระหว่าง 1–10 ต้องทำอย่างไร?

รู้จักกับ Math.floor

ใน JavaScript มีอีกฟังก์ชันที่ชื่อว่า Math.floor(…)

ฟังก์ชันนี้ รับเลขที่เป็นทศนิยมเข้าไป แล้วคืนค่ากลับมาเป็นจำนวนเต็ม โดยจะปัดลง

Math.floor(3.14)3

Math.floor(3.99)3

Math.floor(4.00)4

กรณีที่เป็นเลขติดลบ ฟังก์ชัน Math.floor(…) จะปัดลงเสมอ

Math.floor(-3.14)-4

Math.floor(-3.99)-4

Math.floor(-4.00)-4

สุ่มเลขจำนวนเต็ม

สมมติว่าเราผลลัพธ์ของการสั่ง Math.random() มาเก็บไว้ในตัวแปร x แล้วเราจะได้ผลลัพธ์ที่แตกต่างกันออกไปทุกครั้งที่เราเรียกใช้ x
js
```
let x = Math.random()
```

เราสามารถใช้ตัวดำเนินการทางคณิตศาสตร์ และ Math.floor(…) ร่วมกัน เพื่อสร้างคำตอบที่ต้องการได้ครับ

โค้ด	ผลลัพธ์ที่ได้	ตัวอย่างผลลัพธ์
`x`	จำนวนทศนิยม ที่ ≥ 0 แต่ < 1	`0.000000`
`x * 10`	จำนวนทศนิยม ที่ ≥ 0 แต่ < 10	`0.000000`
`Math.floor(x * 10)`	จำนวนเต็มที่ ≥ 0 แต่ < 10 (ก็คือ 0 ถึง 9)	`0`
`Math.floor(x * 10) + 1`	จำนวนเต็มที่ ≥ 1 แต่ < 11 (ก็คือ 1 ถึง 10)	`1`

ลองทดสอบด้วยตัวเอง

เปิด JavaScript Console ขึ้นมา
พิมพ์ Math.floor(Math.random() * 10) + 1 เข้าไปในคอนโซล → ควรจะได้เลขสุ่มตั้งแต่ 1 ถึง 10 ออกมา
ทำซ้ำขั้นตอนที่ 2 หลายๆ ครั้ง แล้วดูผลลัพธ์ที่ได้

นำโค้ดที่ได้มาใส่ในโปรแกรมของเราได้เลย

let number = document.getElementById('number')
let randomize = document.getElementById('randomize')
randomize.onclick = () => {
  number.value = Math.floor(Math.random() * 10) + 1
}

โค้ด

หลังจากที่ทำโปรเจกต์นี้เสร็จแล้ว จะได้โค้ดดังต่อไปนี้:

ดูโค้ด

html

<!doctype html>
<html>
  <head>
    <title>Randomizer</title>
  </head>
  <body>

    <h1>Randomizer</h1>
    
    <input id="number" size="5">
    <input type="button" id="randomize" value="Randomize">

    <script>
      let number = document.getElementById('number')
      let randomize = document.getElementById('randomize')
      randomize.onclick = () => {
        number.value = Math.floor(Math.random() * 10) + 1
      }
    </script>
    
  </body>
</html>

โจทย์ฝึกหัดเพิ่มเติม

ลองทำให้โปรแกรมนี้สามารถตั้งค่าได้ว่าจะสุ่มเลขตั้งแต่เลขอะไรถึงเลขอะไร

ฟังก์ชัน??

จากโค้ดที่เขียนมา จะเห็นโค้ดที่มีลักษณะเป็นแบบนี้:
js
```
document.getElementById('number')
document.getElementById('randomize')
Math.random()
Math.floor(Math.random() * 10)
```
นี่คือ การเรียกใช้งานฟังก์ชัน ซึ่งจะเป็นหัวข้อของตอนต่อไปครับ

มินิโปรเจกต์: โปรแกรมสุ่มเลข ​

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

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

รู้จักกับ Math.random ​

รู้จักกับ Math.floor ​

สุ่มเลขจำนวนเต็ม ​

โค้ด ​

ฟังก์ชัน?? ​