บทเรียนที่ 5 ตัวสร้างการโต้ตอบอื่นๆ
ตอนนี้คุณมีพื้นฐานในการใช้ตัวสร้างการโต้ตอบเรียบร้อยแล้ว ทีนี้เราจะมาดูตัวสร้างการโต้ตอบตัวต่อไปกัน ซึ่งหากคุณรู้รูปแบบการเขียน และพยายามคิดตามเหตุตามผล เพื่อที่จะทำให้มันใช้งานได้ คุณก็จะสามารถวางสิ่งเหล่านี้ ได้ทั่วทั้งเว็บของคุณ
ตัวสร้างการตอบโต้ onClick
คุณรู้แล้วว่า onMouseOver จะทำให้เกิดการโต้ตอบ(หรือเหตุการณ์หรืออะไรก็แล้วแต่..ที่เกิดขึ้น) เมื่อคุณเอาเมาส์ไปวางบน link ถ้าหากวางบน link แล้วเกิดเหตุการณ์ได้ ฉะนั้นการคลิ๊กเมาส์ก็สามารถทำให้เกิดเหตุการได้เช่นกัน ตัวสร้างการโต้ตอบที่ใช้คือ onClick สังเกตว่าต้องใช้ตัว C ใหญ่เท่านั้นนะครับและตัวอักษรอื่นๆรอบๆต้องเล็กหมด ไม่งั้นสคริปไม่เกิดผล
ผมจะใช้วิธีการขึ้นกล่องข้อความเตือน(alert) เป็นเหตุการณ์ที่รองรับ onClick ซึ่งหากคุณทำแบบฝึกหัดบทที่แล้วสำเร็จ คุณคงจะทราบว่าจะใช้วิธีนี้ได้อย่างไร แต่เราจะช่วยเตือนความจำของคุณว่ามันมีรูปแบบตามข้างล่างนี้(ยังไม่ต้องสนใจเนื้อหาข้างใน)
ผมจะใช้วิธีการขึ้นกล่องข้อความเตือน(alert) เป็นเหตุการณ์ที่รองรับ onClick ซึ่งหากคุณทำแบบฝึกหัดบทที่แล้วสำเร็จ คุณคงจะทราบว่าจะใช้วิธีนี้ได้อย่างไร แต่เราจะช่วยเตือนความจำของคุณว่ามันมีรูปแบบตามข้างล่างนี้(ยังไม่ต้องสนใจเนื้อหาข้างใน)
alert("จะไปที่ไดรฟ์ซีเดี๋ยวนี้ล่ะ! You are off !")
อันบนนี้เป็นรูปแบบปกติของ วิธีสร้างกล่องข้อความเตือนแต่หากใช้ในเครื่องหมายคำพูดของตัวสร้างการโต้ตอบคุณต้องเปลี่ยนเป็น
alert('จะไปที่ไดรฟ์ซีเดี๋ยวนี้ล่ะ! You are off !')
อันบนนี้เป็นรูปแบบปกติของ วิธีสร้างกล่องข้อความเตือนแต่หากใช้ในเครื่องหมายคำพูดของตัวสร้างการโต้ตอบคุณต้องเปลี่ยนเป็น
alert('จะไปที่ไดรฟ์ซีเดี๋ยวนี้ล่ะ! You are off !')
แล้วหากเราเลียนแบบการใช้ onMouseOver สคริปที่ได้ก็จะเป็นดังนี้
<A HREF="C:/" onClick="alert('จะไปที่ไดรฟ์ซีเดี๋ยวนี้ล่ะ! You are off !');">กดตรงนี้</A>
และสคริปก็จะทำงานเมื่อคุณคลิ๊กที่ link นี้
<A HREF="C:/" onClick="alert('จะไปที่ไดรฟ์ซีเดี๋ยวนี้ล่ะ! You are off !');">กดตรงนี้</A>
และสคริปก็จะทำงานเมื่อคุณคลิ๊กที่ link นี้
สังเกตนะครับ ว่าคำภาษาอังกฤษ ผมใช้ว่า You are off ! (แปลว่าคุณกำลังออกไปแล้ว !) ผมจะไม่ใช้ประโยคย่อว่า... You 're off ! เพราะว่าเครื่องหมายขีดเดียวนั่น หากใส่เพิ่มลงไป คอมจะเห็นว่าจุดนั้นเป็นจุดเสร็จสิ้นของข้อความ และพอมันไปเจอเครื่องหมายขีดเดียวตัวที่สามโผล่ขึ้นมา ตอนท้ายข้อความ คอมฯก็งง และขึ้น Error ...แต่มีวิธีแก้ครับ โดยการใส่เครื่องหมายทับกลับด้าน( \ ) ลงไปหน้าเครื่องหมายขีดเดียว เท่านี้ก็จะไม่ Error และเครื่องหมายขีดเดียวก็ปรากฎอยู่ในกล่องข้อความ onClick ทำงาน...ลองทำดูสิครับ ทั้งแบบ Error และไม่ Error
<A HREF="C:/" onClick="alert('จะไปที่ไดรฟ์ซีเดี๋ยวนี้ล่ะ! You \'re off !');">กดตรงนี้</A>
ตัวสร้างการโต้ตอบ onFocus
อันนี้เป็นตัวสร้างการโต้ตอบที่ดีเยี่ยมตัวหนึ่ง ซึ่งสามารถสร้างเหตุการณ์ขึ้นหลังจากที่ผู้ใช้ คลิ๊กลงไปในแบบฟอร์มต่างๆ (จริงๆแล้ว focus แปลว่า เพ่งความสนใจ ซึ่งในที่นี้ก็คือ การคลิ๊กนั่นเอง) ยกตัวอย่างเช่น...
<FORM>
<INPUT TYPE="text" SIZE="30"
onFocus="window.status='โปรดพิมพ์ข้อความลงในนี้ครับ';">
</FORM>
สังเกตว่า ใน onFocus ต้องใช้ตัว F ใหญ่เท่านั้นและตัวอักษรรอบ F ต้องเล็กหมด และข้างล่าง เป็นผลของสคริปนี้ครับ... (ลองคลิ๊กในแถบข้อความ แล้วสังเกต status bar ไม่ต้องสนใจข้อความภาษาอังกฤษบนแถบข้อความนะครับ คือเว็บฟรีนี้ เขาไม่ยอมให้สร้างแบบฟอร์มที่ถูกต้องได้ แต่มันก็ยังพอใช้เป็นตัวอย่างได้อยู่ครับ)
<FORM>
<INPUT TYPE="text" SIZE="30"
onFocus="window.status='โปรดพิมพ์ข้อความลงในนี้ครับ';">
</FORM>
สังเกตว่า ใน onFocus ต้องใช้ตัว F ใหญ่เท่านั้นและตัวอักษรรอบ F ต้องเล็กหมด และข้างล่าง เป็นผลของสคริปนี้ครับ... (ลองคลิ๊กในแถบข้อความ แล้วสังเกต status bar ไม่ต้องสนใจข้อความภาษาอังกฤษบนแถบข้อความนะครับ คือเว็บฟรีนี้ เขาไม่ยอมให้สร้างแบบฟอร์มที่ถูกต้องได้ แต่มันก็ยังพอใช้เป็นตัวอย่างได้อยู่ครับ)
ตัวสร้างการโต้ตอบ onBlur
หากคุณเพ่งความสนใจไปที่สิ่งหนึ่งได้ คุณก็สามารถละความสนใจออกจากสิ่งนั้นได้เช่นกัน และ onBlur ก็จะทำหน้าที่สร้างเหตุการณ์ เมื่อคุณละความสนใจในสิ่งนั้น ...ดังตัวอย่างต่อไปนี้ (คลิ๊กในแถบข้อความ แล้วคลิ๊กอีกทีนอกแถบข้อความสิครับ เหมือนกับว่าคุณละความสนใจออกจากแถบข้อความ)
เจํง..ปะ ผมว่าคุณพอจะเดาสคริปได้นะ จะลองพิมพ์เอง แล้วมาดูเฉลยข้างล่างก็ได้...
<FORM><INPUT TYPE="text" SIZE="30"value="คลิ๊กในนี้สิครับ" onBlur="alert('จะหนีไปไหน!');"></form>
<FORM><INPUT TYPE="text" SIZE="30"value="คลิ๊กในนี้สิครับ" onBlur="alert('จะหนีไปไหน!');"></form>
ตัวสร้างการโต้ตอบ onChange
การทำงานของ onChage คล้ายๆกับการทำงานของ onBlur onChage จะตรวจสอบว่ามีการเปลี่ยนแปลงอะไรเกิดขึ้นรึเปล่า ถ้าหากมีการเปลี่ยนแปลง(Change) เหตุการณ์ก็จะเกิดขึ้น สามารถนำไปใช้กับแถบข้อความ เพื่อเตือนผู้ใช้ว่ากรอกข้อความลงไปถูกต้องแน่นอนแล้วหรือ? ดังเช่นตัวอย่างนี้...
<form>
<INPUT TYPE="text" SIZE="40"
VALUE="โปรดกรอกรหัสลับเฉพาะของคุณ"
onChange="window.status='?!?!? แน่ใจแล้วหรือว่ารหัสถูกต้อง ?!?!?'">
</form>
และนี่คือผลของสคริป...(ลองคลิ๊กเข้าไปในแถบข้อความ แล้วลบหรือเพิ่มเติมตัวอักษรลงไป แล้วคลิ๊กนอกแถบข้อความ...สังเกตความเปลี่ยนแปลงที่ status bar)
<form>
<INPUT TYPE="text" SIZE="40"
VALUE="โปรดกรอกรหัสลับเฉพาะของคุณ"
onChange="window.status='?!?!? แน่ใจแล้วหรือว่ารหัสถูกต้อง ?!?!?'">
</form>
และนี่คือผลของสคริป...(ลองคลิ๊กเข้าไปในแถบข้อความ แล้วลบหรือเพิ่มเติมตัวอักษรลงไป แล้วคลิ๊กนอกแถบข้อความ...สังเกตความเปลี่ยนแปลงที่ status bar)
ตัวสร้างการโต้ตอบ onSelect
ไม่ต้องอธิบายมาก...ตัวนี้จะทำให้เกิดเหตุการณ์เมื่อคุณคลิ๊กเมาส์ค้างแล้วลากคลุมข้อความในแถบข้อความ ดังตัวอย่างนี้ครับ...
ตัวสร้างการโต้ตอบ onSubmit
อันนี้จะสร้างเหตุการณ์เมื่อผู้ใช้คลิ๊กที่ปุ่ม Submit (ปุ่มที่อยู่ล่างสุดของแบบฟอร์ม เป็นปุ่มที่คุณกดเมื่อกรอกแบบฟอร์มทุกอย่างเสร็จสิ้น และพร้อมจะที่ส่งข้อมูลไปยังเว็บนั้น) ในตัวอย่างนี้ จะขอบคุณหลังจากกดปุ่ม submit...
<form>
<INPUT TYPE="submit" value="Submit Button"
onSubmit="alert('ขอบคุณมากครับ')">
</form>
<form>
<INPUT TYPE="submit" value="Submit Button"
onSubmit="alert('ขอบคุณมากครับ')">
</form>
(ข้างบนนี้เป็นแค่ตัวอย่างนะครับ การใช้งานปุ่ม Submit นั้นผมก็ไม่มีความรู้ ไม่เคยเอาไปใช้อะไรนะครับ)
ตัวสร้างการโต้ตอบ onLoad และ onUnLoad
ตอนนี้ยังไม่มีตัวอย่างของสองตัวนี้ครับ จะมีบทเรียนของแต่ละตัวในอีกหลายบทถัดไปครับ ซึ่งทั้งสองตัวนี้จะปรากฎอยู่ใน HTML ภายในส่วนของคำสั่ง <BODY> ซึ่งจะทำให้เกิดเหตุการณ์เมื่อเปิดเว็บขึ้นมา(onLoad) หรือเกิดหลังจากออกจากเว็บ(onUnLoad เป็นศัพท์เทคนิคครับ..ไม่ได้แปลว่าไม่โหลด) สองตัวนี้จะมีความสำคัญมากขึ้น เมื่อนำมาใช้ร่วมกับชุดคำสั่ง(ภาษาอังกฤษใช้คำว่า Function ...จะพูดถึงในอีกหลายบทถัดไปนะครับ หัวข้อนี้อ่านเล่นๆ ลืมๆมันไปก่อน)
แบบฝึกหัด
...วันนี้เรียนหลายหัวข้อทีเดียว การบ้านต้องเยอะแน่ๆ...
ใช่แล้วครับ...ผมต้องการให้คุณสร้างแบบฟอร์มที่ มีการโต้ตอบกับผู้ใช้ ซึ่งในแบบฟอร์มนั้น ต้องมีสามสิ่งดังนี้
ใช่แล้วครับ...ผมต้องการให้คุณสร้างแบบฟอร์มที่ มีการโต้ตอบกับผู้ใช้ ซึ่งในแบบฟอร์มนั้น ต้องมีสามสิ่งดังนี้
1. กล่องข้อความที่ถามชื่อผู้ใช้ โดยข้อความในกล่องระบุว่า "ใส่ชื่อของคุณลงในนี้"
2. กล่องเช็คเครื่องหมายถูก แบบนี้ข้างล่างนี้จำนวนกี่กล่องก็ได้
ถามผู้ใช้ว่าระหว่างทุเรียนกับมังคุด...ชอบอันไหนมากกว่ากัน
3. และท้ายสุดคือปุ่ม Submit ที่เมื่อกดแล้วจะขึ้นกล่องข้อความขอบคุณผู้ใช้ที่ได้กรอกข้อมูลส่งไปให้(ส่งหลอกๆนะครับ..ในที่นี้)
ข้อแนะนำ : สำหรับผู้ที่ไม่มีความรู้ HTML การเขียนโค้ด HTML แสดงแถบข้อความ มีอยู่ในหลายตัวอย่างข้างบนครับ ส่วนกล่องเครื่องหมายถูกเขียนได้ดังนี้ครับ
<form> <input type="checkbox"> (พิมพ์คำถามลงไปในนี้ได้เลยครับ) </form>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น