บทเรียนที่ 27 การแสดงภาพแบบ Slide
สามบทสุดท้ายของการเรียนพื้นฐานจาวาสคริป(27,28,29) จะช่วยให้คุณนำเกือบทุกสิ่งที่เรียนมาใช้ร่วมกัน ซึ่งสามตัวอย่างต่อไปนี้ เป็นจาวาสคริปที่นิยมใช้กันมาก ที่เราจะนำมาแยกโครงสร้างให้คุณเห็น แต่ตอนนี้เราขอให้คุณทำอะไรบางอย่างหน่อยครับ
หากคุณยังไม่ได้เรียนหรือมีความรู้เกี่ยวกับบทนี้ โปรดพิจารณาที่สคริป แล้วพยายามแยกโครงสร้างด้วยตัวคุณเอง ดูว่าส่วนไหนทำให้เกิดสิ่งใด ดูว่าส่วนไหนทำงานก่อนหรือหลัง... แล้วลองคิดดูว่า คุณจะสามารถแก้ไขสคริปนี้ให้ทำงานได้ดีขึ้นไหม ให้เป็นไปดังใจคุณได้รึเปล่า ...เราจะนำคุณไปสุดทาง และในที่สุดก็จะขึ้นอยู่กับคุณ ที่จะสร้างหรือแก้ไขจาวาสคริปของคุณเอง
บทนี้เป็นตัวอย่างของการแสดงภาพแบบ Slide(แปลว่า เลื่อน) ที่เมื่อผู้ใช้คลิ๊กที่ link แล้ว รูปภาพจะเปลี่ยนเป็นอีกภาพหนึ่ง เราจะใช้การกำหนดประโยค if และตัวแปรที่ชื่อ num ไม่มีอะไรใหม่เลยใช่รึเปล่า ? ...มีอยู่พอสมควรครับ!
สคริป...
<HTML><HEAD><SCRIPT language= "javascript">
var num=1
img1 = new Image ()
img1.src = "http://www.freewebs.com/maneemeeta/na.jpg"
img2 = new Image ()
img2.src = "http://www.freewebs.com/maneemeeta/action.jpg"
img3 = new Image ()
img3.src = "http://www.freewebs.com/maneemeeta/lan.jpg"
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT></HEAD>
<BODY><CENTER>
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg" NAME="mypic" BORDER=0>
<p>
<h2><A HREF="javascript:slideshow()">
กดที่นี่เพื่อดูรูปอื่น</A></h2>
</CENTER></BODY></HTML>
var num=1
img1 = new Image ()
img1.src = "http://www.freewebs.com/maneemeeta/na.jpg"
img2 = new Image ()
img2.src = "http://www.freewebs.com/maneemeeta/action.jpg"
img3 = new Image ()
img3.src = "http://www.freewebs.com/maneemeeta/lan.jpg"
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT></HEAD>
<BODY><CENTER>
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg" NAME="mypic" BORDER=0>
<p>
<h2><A HREF="javascript:slideshow()">
กดที่นี่เพื่อดูรูปอื่น</A></h2>
</CENTER></BODY></HTML>
ผลของสคริปนี้
กดที่นี่เพื่อดูรูปอื่น
มาแยกโครงสร้างสคริปกันครับ
· เราจะแยกออกเป็นสองส่วน
<SCRIPT language= "javascript">
var num=1
img1 = new Image ()
img1.src = "http://www.freewebs.com/maneemeeta/na.jpg"
img2 = new Image ()
img2.src = "http://www.freewebs.com/maneemeeta/action.jpg"
img3 = new Image ()
img3.src = "http://www.freewebs.com/maneemeeta/lan.jpg"
var num=1
img1 = new Image ()
img1.src = "http://www.freewebs.com/maneemeeta/na.jpg"
img2 = new Image ()
img2.src = "http://www.freewebs.com/maneemeeta/action.jpg"
img3 = new Image ()
img3.src = "http://www.freewebs.com/maneemeeta/lan.jpg"
· เรื่องใหม่มาแล้วครับ! ...สังเกตว่า num=1 ไม่ได้อยู่ในชุดคำสั่งเหมือนบทก่อนๆ และการกำหนดข้างบนทั้งหมดก็ไม่ได้อยู่ในชุดคำสั่งเช่นเดียวกัน โดยการกำหนดค่าตัวแปร ในตอนเริ่มต้นของจาวาสคริป ตัวแปรนั้นจะกลายเป็นตัวแปรที่สามารถนำมาใช้ได้ทั้งจาวาสคริป ได้ทั้งเอกสาร HTML และหมายความว่าทุกชุดคำสั่ง สามารถหยิบตัวแปรนี้มาใช้งานหรือแก้ไขค่าตัวแปรได้
· img1 = new Image() เป็นการตั้งชื่อรูปภาพใหม่ ให้มีชื่อว่า img1
img1.src= เป็นการกำหนดที่อยู่ของรูป ซึ่งคุณควรจะใช้เมื่อ มีรูปภาพหลายๆรูป ดังเช่นตัวอย่างนี้มี 3 รูป 3 ที่อยู่
img1.src= เป็นการกำหนดที่อยู่ของรูป ซึ่งคุณควรจะใช้เมื่อ มีรูปภาพหลายๆรูป ดังเช่นตัวอย่างนี้มี 3 รูป 3 ที่อยู่
· ภายในเครื่องหมายวงเล็บของ new Image() สามารถใส่ความกว้างและความสูง เพื่อกำหนดขนาดรูปได้(จะมีตัวอย่างในบทต่อไปครับ) ซึ่งไม่จำเป็นต้องใช้ในที่นี้ครับ แต่จะช่วยให้เวลาโหลดสั้นขึ้นได้ ชื่อรูปภาพและที่อยู่ของรูปที่เรากำหนดไว้ สามารถใช้ในทุกคำสั่งด้านล่างได้ เช่นเดียวกับตัวแปร num ที่อยู่นอกชุดคำสั่งเช่นเดียวกัน สามารถนำมาใช้ได้ทุกๆส่วนของเอกสาร HTML ...โปรแกรมจะทำการโหลดภาพไว้ล่วงหน้าตั้งแต่ตอนที่เปิดเข้ามา ทั้งที่ภาพนั้นยังไม่ถูกแสดง ซึ่งเป็นส่วนที่สำคัญมาก ของตัวอย่างในบทต่อไป ที่เราจะสร้างภาพเคลื่อนไหว(Animation) ซึ่งผู้ใช้ไม่ต้องรอโหลดแต่ละภาพจากเซิร์ฟเวอร์ แต่จะโหลดมาล่วงหน้าก่อนแล้ว!
· เข้าสู่ส่วนที่สองครับ...
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT>
{
num=num+1
if (num==4)
{num=1}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT>
· เมื่อเริ่มเข้าสู่การทำงานของชุดคำสั่งนี้ num จะกลายเป็น 1 ซึ่งมาจากการที่ผู้ใช้คลิ๊กที่ปุ่ม ชุดคำสั่ง slideshow นี้ จึงทำงาน
· การทำงานของ slideshow() แต่ละครั้ง จะเพิ่มค่าของ num ทีละหนึ่ง เมื่อ num=0 เงื่อนไข if จะเป็นจริงและทำให้ num กลายเป็น 1 อีกครั้ง ที่อยู่ของภาพหรือ document.mypic.src ถูกเปลี่ยนเป็นค่าของ img บวก num บวก src ยกตัวอย่างเช่น เมื่อ num=1 document.mypic.src จะกลายเป็น img1.src
· เจอของใหม่อีกแล้วครับ คำสั่ง eval() ใช้เพื่อเปลี่ยนข้อความ(string) ให้กลายเป็นชื่อตัวแปร เพราะว่า "img" และ ".src" เป็นข้อความ(มีเครื่องหมายคำพูดหุ้ม) เมื่อนำมารวมกับ num ซึ่งเป็นตัวแปรแล้วแล้ว เราต้องการให้ทั้งหมดนี้กลายชื่อตัวแปร จึงต้องใช้ eval() เพื่อเปลี่ยนสิ่งที่อยู่ข้างในวงเล็บของ eval() ให้เป็นตัวแปรทั้งหมดครับ ใครจะทดลองลบ eval() ทิ้ง แล้วดูผลที่เกิดขึ้นก็ได้นะครับ
· แล้วท้ายสุดเป็น link แบบพิเศษหน่อยครับ...
<A HREF="javascript:slideshow()">
กดที่นี่เพื่อดูรูปอื่น</A>
กดที่นี่เพื่อดูรูปอื่น</A>
อันนี้ก็ใหม่เช่นกัน...ทำหน้าที่คล้ายปุ่มที่กดแล้วชุดคำสั่งทำงาน แต่คราวนี้เรียกทั้ง javascript ครับพร้อมกับชุดคำสั่งด้วย ถ้าคุณใช้แต่ชื่อชุดคำสั่งอย่างเดียว เจ๊งครับ(ลองทำดู) นี่ก็เป็นลักษณะของ link ที่ใช้เรียกชุดคำสั่งครับ เวลาที่คุณเล่นเน็ตคุณอาจไปเจอ link แบบนี้เข้า ที่รู้ว่าเป็น link แบบนี้ เพราะเวลาลากเมาส์ไปวาง แทนที่ status bar จะขึ้น URL ของ link นั้น กลับขึ้น javascript:ชื่อชุดคำสั่ง() แทน
แบบฝึกหัด
ให้คุณแก้ไขสคริปข้างบนใหม่ โดยใช้รูปเริ่มต้นเหมือนเดิม แต่ให้ใช้ค่า num เริ่มต้น เท่ากับ 3 ...ซึ่งเมื่อกด link ไปเรื่อยๆโปรแกรมจะแสดงรูป img3.src แล้วเปลี่ยนเป็น img2.src แล้วเปลี่ยนเป็น img1.src เมื่อ num เท่ากับ 0 เปลี่ยน num ให้เป็น 3
ประมาณว่าแก้สคริปตัวอย่างให้แสดงภาพกลับลำดับการแสดง
แนะนำให้ save รูปเก็บไว้ในคอมฯครับ แล้วใช้ที่อยู่ของรูปในคอมฯ หากคุณ save หน้านี้ทั้งหน้าลงเครื่องแล้ว ให้คลิ๊กขวาที่รูปแล้วเลือก property เพื่อดูที่อยู่ และลากเมาส์คลุมที่อยู่ แล้ว copy มาวางในสคริปได้เลยครับ หรือว่าจะใช้รูปในเครื่องของคุณเองก็ได้ครับ อ้อ !...num=num-1 สามารถเขียนอีกแบบคือ num-- (พิมพ์เครื่องหมายลบติดกันสองครั้ง) ซึ่งมีความหมายเหมือนกันครับ
ประมาณว่าแก้สคริปตัวอย่างให้แสดงภาพกลับลำดับการแสดง
แนะนำให้ save รูปเก็บไว้ในคอมฯครับ แล้วใช้ที่อยู่ของรูปในคอมฯ หากคุณ save หน้านี้ทั้งหน้าลงเครื่องแล้ว ให้คลิ๊กขวาที่รูปแล้วเลือก property เพื่อดูที่อยู่ และลากเมาส์คลุมที่อยู่ แล้ว copy มาวางในสคริปได้เลยครับ หรือว่าจะใช้รูปในเครื่องของคุณเองก็ได้ครับ อ้อ !...num=num-1 สามารถเขียนอีกแบบคือ num-- (พิมพ์เครื่องหมายลบติดกันสองครั้ง) ซึ่งมีความหมายเหมือนกันครับ
เฉลย
<HTML><HEAD><SCRIPT language= "javascript">
var num=3
img1 = new Image ()
img1.src = "http://www.freewebs.com/maneemeeta/na.jpg"
img2 = new Image ()
img2.src = "http://www.freewebs.com/maneemeeta/action.jpg"
img3 = new Image ()
img3.src = "http://www.freewebs.com/maneemeeta/lan.jpg"
function slideshow()
{
num=num-1
if (num==0)
{num=3}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT></HEAD>
<BODY><CENTER>
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg"
NAME="mypic" BORDER=0 >
<p>
<h2><A HREF="javascript:slideshow()">กดที่นี่เพื่อดูรูปอื่น</A></h2>
</CENTER></BODY></HTML>
var num=3
img1 = new Image ()
img1.src = "http://www.freewebs.com/maneemeeta/na.jpg"
img2 = new Image ()
img2.src = "http://www.freewebs.com/maneemeeta/action.jpg"
img3 = new Image ()
img3.src = "http://www.freewebs.com/maneemeeta/lan.jpg"
function slideshow()
{
num=num-1
if (num==0)
{num=3}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT></HEAD>
<BODY><CENTER>
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg"
NAME="mypic" BORDER=0 >
<p>
<h2><A HREF="javascript:slideshow()">กดที่นี่เพื่อดูรูปอื่น</A></h2>
</CENTER></BODY></HTML>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น