>> ตอนนี้ฉันรู้แล้วว่าเธอทั้งหลายรู้จักภาษาจาวาสคริปต์กันพอสมควรแล้ว ถึงแม้จะไม่ถึงครึ่งของครึ่งของครึ่ง (แอบเศร้า) แต่ก็พอนำมันมาสร้างเป็นงานชิ้นเล็กๆได้แล้วนะเออ โอกาสนี้ฉันก็เลยจะชวนเธอมาดักจับเหตุการณ์การกดปุ่มใดๆบนคีย์บอร์ดกัน เอาละสิ แล้วต้องรู้เรื่องไหนบ้าง มาๆฉันจะเล่าสิ่งที่ฉันพอจะรู้ให้ฟัง
>> เธอที่น่ารักต้องรู้จักเจ้า Event Listener ก่อนนะ (ฉันอยากให้เธอใช้ตัวนี้) แล้วมันคืออะไรเหรอจ๊ะ?
ตอบ มันก็คือนักฟัง ที่จะคอยฟังสิ่งต่างๆที่อาจเกิดขึ้นเมื่อไรก็ได้ ฟังเพื่อต้องการกระทำอย่างหนึ่งอย่างใดจากสิ่งที่ฟังนั่นเอง ยังไม่เข้าใจอะ? เอางี้ รู้จักพวกชอบแอบฟังแอบดูชาวบ้านไหม ใครกำลังดัง ใครภาพหลุด ใครตบกับใคร ใครแย่งแฟนใคร ต้าย! นั่นแหละพวกชอบนินทาชาวบ้านก็ด้วย คือฟังแล้วเอามาเล่าต่อ ขยายเรื่องจริงสร้างเรื่องเท็จสนุกสนานกันวุ่นวาย
อ่านเพิ่มเติมเกี่ยวกับ JavaScript Event Listener
- จากเว็บมาตราฐาน http://www.w3schools.com/jsref/dom_obj_event.asp
- เข้าใจมันมากขึ้นพร้อมกับตัวอย่างที่ดี https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
>> เธอที่น่ารักต้องเข้าใจว่าทุกปุ่มที่เธอกดลงไปนั้นจะให้ค่าตัวเลขออกมาเสมอ และเขา (ใครก็ไม่รู้) ได้กำหนดความหมายของแต่ละตัวเลขเอาไว้หมดแล้ว เธอกับฉันมีหน้าที่ที่จะต้องรู้ว่าตัวเลขไหนให้ความหมายว่าอย่างไรพอ คือพอเท่าที่ต้องการใช้น่ะจ๊ะคนดี
อ่านเพิ่มเติมเกี่ยวกับ JavaScript Key Code
- พร้อมช่องสำหรับกดปุ่มใดๆ แล้วมันจะคืนค่าตัวเลข code ออกมา http://www.scripttheweb.com/js/ref/javascript-key-codes/
- document การใช้งานออบเจ็กต์ event เช่นเดียวกับการเรียกใช้ event listener อ่านตรงนี้แล้วรับรองว่าเข้าใจง่ายขึ้น https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode
>> ตัวอย่างต่อไปนี้จะแสดงให้เธอเห็นว่า เราสามารถขอค่าออบเจ็กต์ Element จากแท็กที่ชื่อ img เพื่อเปลี่ยนเส้นทางของภาพผ่านแอตทริบิวต์ src ของมันได้ ซึ่งภาษา HTML เวลาที่เธอต้องการแสดงรูปภาพจะเขียนได้อย่างง่ายๆดังนี้
<img src="x" />
เมื่อ x หมายถึง URL ใดๆที่อ้างอิงไปยังรูปภาพที่ต้องการนั้น จากโค้ดเราขอออบเจ็กต์ Element ของแท็ก img เก็บไว้ในตัวแปรชื่อ myImage จากนั้นตรวจจับค่าคีย์ที่จะเกิดขึ้น หากกดปุ่ม A (คีย์โค้ดคือ 65) จะเปลี่ยนค่าของ src ไปยัง URL ใหม่ แต่หากกลับไปกดปุ่ม D (คีย์โค้ดคือ 68) จะเปลี่ยนค่าของ src ไปยัง URL เดิม ลองกดปุ่มทั้งสองนี้เล่นสลับไปมาสิ
>> part หน้ามาลุยต่อกันเรื่องของลูป (Loop) เขียนภาษาจาวาสคริปต์อย่างไรให้เกิดการกระทำโค้ดซ้ำๆหลายๆรอบได้กับหัวข้อ Iteration Statements ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น