บทเรียนที่ 10 ตัวสร้างการโต้ตอบ : onUnLoad และ onMouseOut
เราจะสอนตัวสร้างการโต้ตอบ 2 ตัวสุดท้าย ซึ่งคุณจะต้องจำเอาไว้ ได้แก่ onMouseOut และ onUnload (เวลาเอาไปใช้ อย่าลืมพิมพ์ตัวใหญ่เล็กให้ถูกต้องด้วย) ผมจัดให้สองอันนี้อยู่ในบทเดียวกัน เพราะทั้งสองจะทำให้เกิดเหตุการณ์ในตอนหลัง ไม่เกิดทันทีแบบเหมือนตัวสร้างการโต้ตอบที่แล้วๆมา
คุณรู้แล้วว่า onMouseOver ทำให้เกิดบางสิ่งบางอย่าง(ที่คุณกำหนด)ขึ้น เมื่อคุณลากเมาส์ไปบนจุดหรือบริเวณที่กำหนดไว้ เช่น link ที่เป็นตัวหนังสือ onMouseOut สามารถทำให้บางสิ่งบางอย่างเกิดขึ้นหลังจากลากเมาส์ออกจาก link คุณรู้แล้วว่า onLoad จะทำให้เกิดบางสิ่งบางอย่างตอนที่กำลังโหลดหน้านั้น ตรงกันข้าม...onUnLoad จะทำให้เกิดบางสิ่งบางอย่างเกิดขึ้นหลังจากที่คุณออกจากหน้านั้น(ไม่ใช่ว่า หน้านั้นไม่โหลดจึงจะเกิดเหตุการณ์นะครับ)
สคริป...ตัวอย่างของ onMouseOut
<A HREF="http://www.manager.co.th"
onMouseOver="window.status='เฮ้ย ออกไปเดี๋ยวนี้!'; return true"
onMouseOut="window.status='เฮ้อ ค่อยยังชั่ว ..ขอบคุณมาก'; return true">
นำปลายลูกศรมาวางบนนี้สิครับ</A>
onMouseOver="window.status='เฮ้ย ออกไปเดี๋ยวนี้!'; return true"
onMouseOut="window.status='เฮ้อ ค่อยยังชั่ว ..ขอบคุณมาก'; return true">
นำปลายลูกศรมาวางบนนี้สิครับ</A>
สคริปบรรทัดล่างนี้ เป็นตัวอย่างของ onUnLoad
<BODY onUnload="alert('จะไปแล้วเหรอ ?')">
ผลของสคริปด้านบน
ลองลากเมาส์เข้าๆ ออกๆ จาก link ข้างล่างดูครับ จะเห็นผลของตัวสร้างการโต้ตอบ onMouseOver และ onMouseOut ส่วนผลของ onUnLoad นั้น ผมไม่ได้ทำไว้นะครับ ขอให้ทดลองกันเอาเอง
มาแยกโครงสร้างของสคริปกันครับ
ถึงตอนนี้ คงไม่ต้องบอกอะไรมากแล้ว คุณก็คงนึกคิดเอาเองได้แล้วว่ามันเกิดอะไรขึ้นบ้าง ...จำได้ไหมครับว่า ในบทที่สี่ ที่เราใช้เครื่องหมายลูกน้ำ( , ) แยกคำสั่งทั้งสองออกจากกัน เพื่อให้คำสั่งทั้งสองมีผลต่อเนื่องกันได้ แต่ในกรณีนี้ เราต้องการให้ คำสั่งทั้งสองมีผลพร้อมกัน คือเราต้องการให้เกิดทั้งตอนที่ลากเมาส์วางบน link และเกิดอีกเหตุการณ์หลังจากลากเมาส์ออกจาก link ด้วย ดังนั้น เราจึงเขียนแยกคำสั่งกัน โดยที่แต่ละคำสั่งก็มี return true เพื่อให้ข้อความใน status bar ปรากฎอยู่เสมอ
ส่วนผลที่เกิดขึ้นหลังออกจากหน้าต่างนั้น ไม่ว่าด้วยวิธีใดก็ตาม เช่น กดปิดหน้าต่าง, กดปุ่ม Back, เปิด link, กด Refresh ฯลฯ ...ถูกสร้างขึ้นโดย การเพิ่ม onUnLoad เข้าไปหลังคำสั่ง BODY ของเอกสาร(ไฟล์) HTML โปรดใช้เครื่องหมายคำพูดและเครื่องหมายขีดเดียว ให้ถูกต้องตามกฎด้วยครับ
ส่วนผลที่เกิดขึ้นหลังออกจากหน้าต่างนั้น ไม่ว่าด้วยวิธีใดก็ตาม เช่น กดปิดหน้าต่าง, กดปุ่ม Back, เปิด link, กด Refresh ฯลฯ ...ถูกสร้างขึ้นโดย การเพิ่ม onUnLoad เข้าไปหลังคำสั่ง BODY ของเอกสาร(ไฟล์) HTML โปรดใช้เครื่องหมายคำพูดและเครื่องหมายขีดเดียว ให้ถูกต้องตามกฎด้วยครับ
แบบฝึกหัด
ให้คุณใช้ชุดคำสั่งหนึ่งชุด , onUnLoad หนึ่งตัว , onMouseOver หนึ่งตัว และ onMouseOut หนึ่งตัว เพื่อที่จะทำสิ่งต่อไปนี้
· สร้างหน้าที่มีข้อความที่เป็น link (เหมือนในตัวอย่างข้างบน แต่คิดข้อความเอาเองก็ได้)
· เมื่อลากเมาส์ไปวางบน link นั้น จะมีข้อความขึ้นที่ status bar ว่า... สวัสดีผู้ใช้ ชื่อ Browser ของผู้ใช้ : คลิ๊กที่นี่
· เมื่อลากเมาส์ออกจาก link นั้น จะมีข้อความขึ้นที่ status bar ว่า... คุณจะออกจาก URLหรือที่อยู่ของหน้านั้น ในเร็วๆนี้
· หลังจากคลิ๊กที่ link จะมีกล่องข้อความเตือนขึ้นมาว่า... จะไปแล้วเหรอ นี่เพิ่งจะ เวลาปัจจุบัน(กี่นาฬิกา กี่นาที)
· เวลาควรจะสร้างด้วยชุดคำสั่ง เพื่อให้เป็นเวลาหลังจากที่คลิ๊กจริงๆ
· ห้ามใช้ onClick เพื่อเรียกกล่องข้อความเตือน ให้ใช้ onUnLoad อย่างเดียว
เฉลย
<html>
<body onUnLoad="a()">
<a href="http://www.pantip.com"
onMouseOver="window.status='สวัสดีผู้ใช้ '+
navigator.appName+' : คลิ๊กที่นี่'; return true"
onMouseOut="window.status='คุณจะออกจาก '+
location.href+' ในเร็วๆนี้'; return true">
นำปลายลูกศรมาวางบนนี้สิครับ</a>
<script language="javascript">
function a(){var a=new Date()
b=a.getHours();c=a.getMinutes()
alert("จะไปแล้วเหรอ นี่เพิ่งจะ "+b+" นาฬิกา "+c+" นาทีเอง")}
</script>
</body>
</html>
<body onUnLoad="a()">
<a href="http://www.pantip.com"
onMouseOver="window.status='สวัสดีผู้ใช้ '+
navigator.appName+' : คลิ๊กที่นี่'; return true"
onMouseOut="window.status='คุณจะออกจาก '+
location.href+' ในเร็วๆนี้'; return true">
นำปลายลูกศรมาวางบนนี้สิครับ</a>
<script language="javascript">
function a(){var a=new Date()
b=a.getHours();c=a.getMinutes()
alert("จะไปแล้วเหรอ นี่เพิ่งจะ "+b+" นาฬิกา "+c+" นาทีเอง")}
</script>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น