เก่งภาษาจาวาสคริปต์: บทเรียนที่ 26 Arrays และการเรียกชุดคำสั่งจากอีกชุดคำสั่ง

บทเรียนที่ 26 แนะนำ Arrays และการเรียกชุดคำสั่งจากอีกชุดคำสั่ง

ตัวอย่างนี้เป็นหัวข้อใหม่ที่เราจะแนะนำครับ นั่นคือ.. Arrays (แปลว่าสิ่งที่ถูกนำมาเรียงกัน เรียกเป็นไทยว่า อาร์เรย์) คุณได้เรียนรู้เกี่ยวกับตัวแปรไปแล้ว ซึ่งแต่ละตัวแปรก็จะมีค่า ค่าเดียว ณ เวลาหนึ่ง แต่ในบางครั้ง คุณต้องการ Array(ไม่เติม s เพราะมีแค่อันเดียว) เพื่อใช้เหมือนเป็นตัวแปร ที่มีหลายๆค่า

ในตัวอย่างนี้ เราให้ผู้ใช้เดาชื่อผลไม้ที่เราสุ่มขึ้นมา กล่องรับค่า(prompt)จะโผล่ขึ้นมาอยู่เรื่อยๆ จนกระทั่งผู้ใช้ทายถูก ในแต่ละครั้งที่กดปุ่มเริ่มเกม ชื่อผลไม้จะถูกสุ่มขึ้นมาใหม่

สคริป...

<HTML><HEAD><SCRIPT language="javascript">
ft=new Array()
ft[0]="ลำใย"
ft[1]="เงาะ"
ft[2]="ฝรั่ง"
ft[3]="แตงโม"
ft[4]="ลองกอง"
num=0
function pickft()
{now=new Date()
num=(now.getSeconds())%5 }
function whichft()
{
pickft()
guess="****"
while (ft[num] != guess.toUpperCase())
{guess=prompt("ให้คุณทายว่าผมชอบผลไม้อะไรครับระหว่าง : ลำใย, เงาะ, ฝรั่ง, แตงโม, หรือ ลองกอง?","เลือกผลไม้แล้วพิมพ์ชื่อลงในนี้ครับ")
if (guess.toUpperCase() == ft[num])
{alert("นั้นล่ะครับ ผลไม้ที่ผมชอบ!")}
else
{alert("ผิดครับ... ลองเลือกอันอื่น")}}
}
</SCRIPT></HEAD>
<BODY><CENTER><FORM>
<INPUT TYPE="button" VALUE="มาทายชื่อผลไม้กันครับ"
onClick="whichft()">
</FORM></CENTER></BODY></HTML>

ผลของสคริปนี้

มาแยกโครงสร้างของสคริปกันครับ

<SCRIPT language="javascript">
ft=new Array()
ft[0]="ลำใย"
ft[1]="เงาะ"
ft[2]="ฝรั่ง"
ft[3]="แตงโม"
ft[4]="ลองกอง"
num=0

· ft=new Array() เป็นการกำหนดให้ ft เป็น Array ...ตรงเครื่องหมายวงเล็บนั้น คุณสามารถใส่ตัวเลขเข้าไปภายในวงเล็บ เพื่อกำหนดความยาวของ Array ยกตัวอย่างเช่น ft=new Array(5)

· จำไว้ว่า Array สามารถมีค่า ได้หลายค่าตามตำแหน่งในเครื่องหมาย [ ] เราสามารถแสดงได้เป็นแผนภาพดังนี้

ค่าต่างๆของ Array ft
ft[0]	ft[1]	ft[2]	ft[3]	ft[4]
ลำใย	เงาะ	ฝรั่ง	แตงโม	ลองกอง

· สังเกตว่าเรากำหนดให้ num มีค่าเดียวคือ 0 ในขณะที่ Array ft มี 5 ค่า

· ต่อมาเป็นส่วนของชุดคำสั่ง pickft() ...

function pickft()
{now=new Date()
num=(now.getSeconds())%5 }

· ชุดคำสั่งนี้จะสุ่มเลขจาก 0 ถึง 4 นึกได้ไหมครับ ว่า เลข 0 ถึง 4 นั้นมีทั้งหมด 5 เลข ซึ่งจะถูกใช้เป็นตำแหน่งของ ft ในชุดคำสั่งถัดไป เช่น เมื่อ num เป็น 1 ชื่อผลไม้ก็จะเป็น ft[1] นั่นคือ เงาะครับ

· ต่อมาเป็นชุดคำสั่ง whichft() ซึ่งภายในมีคำสั่งเรียกชุดคำสั่ง pickft()

whichft()
{
pickft()
guess="****"
while (ft[num] != guess.toUpperCase())
{guess=prompt("ให้คุณทายว่าผมชอบผลไม้อะไรครับระหว่าง : ลำใย, เงาะ, ฝรั่ง, แตงโม, หรือ ลองกอง?","เลือกผลไม้แล้วพิมพ์ชื่อลงในนี้ครับ")
if (guess.toUpperCase() == ft[num])
{alert("นั้นล่ะครับ ผลไม้ที่ผมชอบ!")}
else
{alert("ผิดครับ... ลองเลือกอันอื่น")}}
}

(ประโยค guess=prompt(...) ควรทำให้อยู่ในบรรทัดเดียวครับ)

· คุณพบวิธีใหม่แล้วครับ! ให้สังเกตพอเริ่มชุดคำสั่ง whichft() จะมีการเรียกชุดคำสั่ง pickft() ดังนั้นทุกครั้งที่ผู้ใช้คลิ๊กปุ่ม "มาทายชื่อผลไม้กันครับ" pickft() นี้ จะทำการสุ่มชื่อผลไม้ใหม่ ส่วนของ guess="****" ไม่จำเป็นต้องมีก็ได้ครับ ทดลองดู

· โปรแกรมจะทำซ้ำ While loops จนกระทั่งผู้ใช้ทายถูก คุณคงจะเริ่มคุ้นเคยกับ while loops แล้ว

· สังเกตการสร้างประโยค if และ else ...เกมนี้มีเพียงผลลัพท์ 2 ทาง คือ ถูกกับผิด

· และส่วนของปุ่มที่ใช้เริ่มเกมซึ่งคุณคุ้นเคยดีแล้ว

· เดี๋ยวก่อน ! แล้ว guess.toUpperCase() มันหมายความว่าอย่างไร ?
คือว่า... toUpperCase() เป็นวิธีกระทำ วิธีหนึ่งครับ ใช้เพื่อเปลี่ยนตัวอักษร(guess)ให้เป็นตัวพิมพ์ใหญ่หมด แต่ในตัวอย่างเป็นภาษาไทย จึงไม่จำเป็นต้องใช้ guess.toUpperCase() ใช้ guess ธรรมดาก็พอ แต่ผมไป copy ของฝรั่งมาไงครับ มันเลยติดมาด้วย ฝรั่งเขาเผื่อว่าหากผู้ใช้พิมพ์ภาษาอังกฤษด้วยตัวพิมพ์เล็ก ซึ่งใน Array เขากำหนดเป็นตัวพิมพ์ใหญ่ครับ จึงต้องใช้วิธี toUpperCase() มาช่วยปรับให้เป็นตัวใหญ่เหมือนใน Array ไงครับ จะได้เปรียบเทียบได้ว่าตอบถูกหรือไม่

อธิบายเกี่ยวกับ Arrays อีกหน่อยครับ

· มี Arrays ที่ฝัง(built-in)อยู่ในจาวาสคริปมากมายหลายตัว เช่น แบบฟอร์มสามารถทำให้อยู่ในรูป Arrays คุณสามารถเปลี่ยน document.myform เป็น document.forms[0] ได้ หากฟอร์มนั้น เป็นฟอร์มแรกสุดของเอกสาร HTML (นับจากบนลงล่าง ซ้ายไปขวา) ดังนั้นฟอร์มที่สอง สามารถเขียนได้เป็น document.forms[1] และฟอร์มที่สามเป็น document.forms[2] ...และไปเรื่อยๆ เช่นนี้ อย่าลืมว่าเวลาพิมพ์ฟอร์มในแบบ Arrays ให้ใส่ s รั้งท้ายด้วยนะครับ อย่าพิมพ์แบบ form[0]

· รูปภาพก็เช่นเดียวกันครับ เป็น Arrays ที่มีอยู่ในจาวาสคริปแล้ว คุณสามารถแทน documnet.pic1.src เป็น document.images[0].src หากว่ารูปนั้นเป็นรูปแรกในเอกสาร HTML และรูปต่อๆไปก็ทำแบบเดียวกับฟอร์มครับ

· พอจะเข้าใจ Arrays รึยังครับ ?

แบบฝึกหัด

ให้คุณเขียนโปรแกรมจาวาสคริป ซึ่งมีปุ่ม และข้อความบนปุ่มว่า "แล้วแต่ดวงจะพาคุณไป" เมื่อผู้ใช้กดปุ่มนี้ โปรแกรมจะสุ่มตัวเลข และเลือกที่อยู่ของเว็บไซท์ให้แก่ผู้ใช้ มาหนึ่งเว็บ จากทั้งหมด 5 เว็บ ที่คุณกำหนดที่อยู่เว็บเอาเอง(หากไม่ต่อเน็ต ใช้ที่อยู่ในส่วนต่างๆของคอมก็ได้ครับ) แล้วพาผู้ใช้ไปที่เว็บไซท์นั้นทันที ด้วยคำสั่ง top.location.href = ชื่อที่อยู่[num] top เป็นส่วนประกอบของ window ซึ่งหมายถึง หน้าต่างที่อยู่ในลำดับสูงสุดของ Browser ส่วน location.href คือที่อยู่(URL)

เฉลย

<HTML><HEAD><SCRIPT language="javascript">
st=new Array()
st[0]="URL1"
st[1]="URL2"
st[2]="URL3"
st[3]="URL4"
st[4]="URL5"
num=0
function pickst()
{now=new Date()
num=(now.getSeconds())%5}
function whichst()
{
pickst()
top.location.href =st[num]
}
</SCRIPT></HEAD>
<BODY><CENTER><FORM>
<INPUT TYPE="button" VALUE="แล้วแต่ดวงจะพาคุณไป"
onClick="whichst()">
</FORM></CENTER></BODY></HTML>

เก่งภาษาจาวาสคริปต์

บทเรียนที่ 26 Arrays และการเรียกชุดคำสั่งจากอีกชุดคำสั่ง

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

ทำอินโทรเอฟเฟค ในมือถือ

ฟรีวีดีโอแบ็คกราว สำหรับทำคลิป

ค้นหาบล็อกนี้

เนื้อหาบล็อก

คลังบทความ

สถิติ