บทเรียนที่ 20 การสุ่มเลข
ตัวอย่างนี้จะแนะนำคุณให้รู้จักการสุ่ม(Random)เลขด้วยจาวาสคริป เราสามารถสุ่มได้โดยใช้ค่าเวลาในขณะนั้น สังเกตว่าสคริปต่อไปนี้จะมีเครื่องหมายเปอร์เซ็นต์ (%) แล้วปิดท้ายด้วยตัวเลข ตัวอย่างนี้จะทำการสุ่มเลข 1 ถึง 10
สคริป...
<HTML> <HEAD> <SCRIPT type="text/javascript">
function rand()
{
var now=new Date()
var num=now.getSeconds()%10
var num=num+1
alert(num)
}
</SCRIPT> </HEAD> <BODY> <center>
<h1>การสุ่มเลขด้วยเวลา</h1>
<form>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 1 ถึง 10"
onClick="rand()">
</FORM> </center> </BODY> </HTML>
function rand()
{
var now=new Date()
var num=now.getSeconds()%10
var num=num+1
alert(num)
}
</SCRIPT> </HEAD> <BODY> <center>
<h1>การสุ่มเลขด้วยเวลา</h1>
<form>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 1 ถึง 10"
onClick="rand()">
</FORM> </center> </BODY> </HTML>
ผลของสคริปนี้
การสุ่มเลขด้วยเวลา
มาแยกส่วนประกอบของสคริปกันครับ
· เราจะเริ่มจากส่วนของชุดคำสั่ง...
function rand()
{
var now=new Date()
var num=now.getSeconds()%10
var num=num+1
alert(num)
}
{
var now=new Date()
var num=now.getSeconds()%10
var num=num+1
alert(num)
}
· อย่างแรกเราใช้ชื่อคำสั่งว่า rand
ต่อมาเราตั้งชื่อ now แทนเวลาปัจจุบัน( new Date( ) )
ส่วน num ถูกตั้งขึ้นมาแทนค่าวินาทีซึ่งจะนำมาใช้ในการสุ่มเลข
ต่อมาเราตั้งชื่อ now แทนเวลาปัจจุบัน( new Date( ) )
ส่วน num ถูกตั้งขึ้นมาแทนค่าวินาทีซึ่งจะนำมาใช้ในการสุ่มเลข
· %10 จะแบ่งเวลา 60 วินาทีให้ได้ส่วนละ 10 หมายความว่า ยกตัวอย่างเช่น ตอนที่กดปุ่ม เป็นเวลา 30 วินาที now.getSeconds()%10 จะมีค่าเท่ากับ 0 ถ้าตอนที่กดปุ่ม เป็นเวลา 39 วินาที now.getSeconds()%10 จะมีค่าเท่ากับ 9 แต่เราอยากให้สุ่มจากเลข 1 ถึง 10 เราจึงต้องให้ num=num+1 เพื่อให้ช่วงการสุ่มเปลี่ยนเป็น 1 ถึง 10
· หรืออธิบายได้อีกแบบหนึ่งว่า %10 จะให้ค่าเศษเหลือของตัวเลขที่เหลือจากการหารด้วย 10 ยกตัวอย่างเช่น เมื่อนำ 12 หาร 10 จะได้ 1.2 เหลือเศษ 2 นั่นคือค่าของ 12%10
· ต่อมาเรานำค่าจากการสุ่ม(num) มาแสดงในกล่องข้อความเตือน
· และนี่เป็นส่วนของแบบฟอร์มที่ทำให้การสุ่มเลขทำงาน...
<form>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 1 ถึง 10"
onClick="rand()">
</FORM>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 1 ถึง 10"
onClick="rand()">
</FORM>
· ซึ่งเป็นปุ่มธรรมดาที่เรียกชุดคำสั่งข้างบน
แบบฝึกหัด
ให้คุณเขียนโปรแกรมจาวาสคริป ซึ่งเมื่อผู้ใช้กดปุ่ม จะแสดงการสุ่มเลขระหว่าง 0 ถึง 4 (ใช่แล้วครับจากศูนย์ ถึง สี่) ตัวเลขควรถูกแสดงในกล่องข้อความเตือนซึ่งขึ้นมาว่า... ตัวเลขที่คุณสุ่มคือ เลขจากการสุ่ม
ทำเสร็จแล้วลองทดสอบว่าถูกหรือไม่ ด้วยการกดปุ่มถี่ๆครับ ค่าก็จะเรียงกันไปตามเวลาวินาที ...ทำแบบฝึกหัดนี้ให้เสร็จก่อนค่อยเลื่อนลงไปดูข้างล่างนะครับ
ทำเสร็จแล้วลองทดสอบว่าถูกหรือไม่ ด้วยการกดปุ่มถี่ๆครับ ค่าก็จะเรียงกันไปตามเวลาวินาที ...ทำแบบฝึกหัดนี้ให้เสร็จก่อนค่อยเลื่อนลงไปดูข้างล่างนะครับ
เฉลย
<HTML> <HEAD><SCRIPT type="text/javascript">
function rand()
{
var now=new Date()
var num=now.getSeconds()%5
var num=num
alert("เลขที่คุณสุ่มคือ "+num)
}
</SCRIPT> </HEAD> <BODY> <center>
<h1>การสุ่มเลขด้วยเวลา</h1>
<form>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 0 ถึง 4"
onClick="rand()">
</FORM> </center> </BODY> </HTML>
function rand()
{
var now=new Date()
var num=now.getSeconds()%5
var num=num
alert("เลขที่คุณสุ่มคือ "+num)
}
</SCRIPT> </HEAD> <BODY> <center>
<h1>การสุ่มเลขด้วยเวลา</h1>
<form>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 0 ถึง 4"
onClick="rand()">
</FORM> </center> </BODY> </HTML>
วิธีการสุ่มเลข โดยใช้คำสั่งสุ่มเลข
ตรงนี้แถมให้ครับ เว็บที่แปลมาไม่ได้มีสอนเรื่องนี้ ...คำสั่งนั้นคือ... Math.random() ...เวลานำไปใช้ให้พิมพ์ M ตัวใหญ่เสมอครับ
สคริป...(เอาของเดิมมาแก้)
<HTML> <HEAD> <SCRIPT type="text/javascript">
function rand2()
{
var num2=Math.random()*5
alert("เลขที่คุณสุ่มคือ "+num)
}
</SCRIPT> </HEAD> <BODY> <center>
<h1>การสุ่มเลขด้วยคำสั่งสุ่มเลข</h1>
<form>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 0 ถึง 5"
onClick="rand2()">
</FORM> </center> </BODY> </HTML>
function rand2()
{
var num2=Math.random()*5
alert("เลขที่คุณสุ่มคือ "+num)
}
</SCRIPT> </HEAD> <BODY> <center>
<h1>การสุ่มเลขด้วยคำสั่งสุ่มเลข</h1>
<form>
<INPUT TYPE="button"
VALUE="สุ่มจากเลข 0 ถึง 5"
onClick="rand2()">
</FORM> </center> </BODY> </HTML>
ผลของสคริปนี้
การสุ่มเลขด้วยคำสั่งสุ่มเลข
มาดูในส่วนที่แก้ไขครับ
จะเห็นว่าผมเปลี่ยนชื่อชุดคำสั่งและชื่อตัวแปรเพื่อไม่ให้ซ้ำกับตัวอย่างข้างบน ไม่งั้น Error ครับ ส่วนของการเรียกค่าเวลา และ %10 ถูกลบทิ้งไป ส่วนที่เพิ่มเข้ามาคือ... Math.random()*5 ซึ่ง Math.random() คือคำสั่งสุ่มเลขอัตโนมัติจาก 0 ถึง 1 ครับ ดังนั้น อาจจะสุ่มได้เลข 0.56248 หรือ 0.001453 หรืออะไรก็แล้วแต่ที่อยู่ในช่วงศูนย์ถึงหนึ่ง ซึ่งไม่เป็นเลขลงตัวครับ ทศนิยมตามมาหลายตำแหน่ง เมื่อนำไปคูณ 5 ก็จะได้การสุ่มจากเลข 0 ถึง 5 แต่เลขที่ได้ก็มีทศนิยมอีกบานเบอะเช่นเดียวกัน จะเห็นได้ว่าเป็นการสุ่มที่ไม่แน่นอน และละเอียดเกินไปจริงๆ แต่มีวิธีแก้อยู่ครับ
แบบฝึกหัด
ใช่แล้วครับ! ผมจะให้คุณแก้การสุ่มละเอียดข้างบน ให้เป็นการสุ่มจากเลข 0 ถึง 5 เป็นจำนวนเต็มธรรมดาๆ คือออกมาเป็นเลข 0 1 2 3 4 5 เท่านั้น! (อาจเป็นเลขอื่นได้ แต่โอกาสที่จะเป็นเลขนั้นแทบเป็นศูนย์)
ใบ้ให้ว่า คำสั่งที่ทำให้เลขที่มีทศนิยมเป็นจำนวนเต็มคือ parseInt() (พี เอ อาร์ เอส อี ไอตัวใหญ่ เอ็น ที วงเล็บเปิด วงเล็บปิด) เป็นคำสั่งที่จะตัดเศษทศนิยมทิ้งไป ยกตัวอย่างเช่น parseInt(3.298746) จะให้ค่าเท่ากับ 3 parseInt(5.999999) จะให้ค่าเท่ากับ 5 ผมไม่ขอทำเฉลยไว้นะครับ เพราะผมมั่นใจว่าคุณทำได้ ทำเสร็จแล้วลองทดสอบว่าถูกต้องรึเปล่าด้วยนะครับ (อ้างไปโน่นอีกแล้ว ที่จริงขี้เกียจน่ะครับ ถือว่ามอบความท้าทายให้คุณครับ)
ใบ้ให้ว่า คำสั่งที่ทำให้เลขที่มีทศนิยมเป็นจำนวนเต็มคือ parseInt() (พี เอ อาร์ เอส อี ไอตัวใหญ่ เอ็น ที วงเล็บเปิด วงเล็บปิด) เป็นคำสั่งที่จะตัดเศษทศนิยมทิ้งไป ยกตัวอย่างเช่น parseInt(3.298746) จะให้ค่าเท่ากับ 3 parseInt(5.999999) จะให้ค่าเท่ากับ 5 ผมไม่ขอทำเฉลยไว้นะครับ เพราะผมมั่นใจว่าคุณทำได้ ทำเสร็จแล้วลองทดสอบว่าถูกต้องรึเปล่าด้วยนะครับ (อ้างไปโน่นอีกแล้ว ที่จริงขี้เกียจน่ะครับ ถือว่ามอบความท้าทายให้คุณครับ)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น