งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

การจัดการกับ เหตุการณ์ Event Handling ง 40208 การเขียนได นามิกเว็บเพจ ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "การจัดการกับ เหตุการณ์ Event Handling ง 40208 การเขียนได นามิกเว็บเพจ ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม."— ใบสำเนางานนำเสนอ:

1 การจัดการกับ เหตุการณ์ Event Handling ง การเขียนได นามิกเว็บเพจ ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม

2 Event Handler คืออะไร Event Handler คือการตอบสนองต่อ เหตุการณ์ (Event) ที่เกิดขึ้นจากการ กระทำลงในเว็บเพจ ในลักษณะของการ โต้ตอบโดยทันทีที่มีเหตุการณ์ใด ๆ กระทำ ลงไปในฟอร์ม หรือออบเจ็กที่กำหนด เพื่อ ไปกระตุ้นให้คำสั่งของ JavaScript ทำงาน เช่นการคลิ๊กเมาส์บนปุ่มกด หรือ การเลื่อนเมาส์ เข้าไปในรูปก็จะทำให้เว็บ เพจมีการเปลี่ยนแปลงตามคุณสมบัติของ เหตุการณ์ต่างๆ ที่กำหนด เป็นต้น

3 การกำหนด Event Handler เราสามารถกำหนดอีเวนต์แฮนด์เลอร์ให้ทำงาน ร่วมกับ tag HTML และภาษาจาวาสคริปต์ ได้ โดยมีรูปแบบการเขียนดังนี้

4 onAbort อีเวนต์แฮนด์เลอร์ onAbort ใช้ตอบสนองต่อ เหตุการณ์สำหรับขัดจังหวะการประมวลผล ของ โปรแกรม เช่น การกดคลิ๊กที่ปุ่ม Stop บน บราวเซอร์ในเว็บเพจเพื่อให้หยุดการโหลด รูปภาพ

5 ตัวอย่าง onAbort Example of onAbort Event Handler ตัวอย่างการใช้งานอีเวนต์แฮนด์ เลอร์ onAbort คลิ๊กปุ่ม Stop บนบราวเซอร์เพื่อหยุดการโหลดรูปภาพ

6 onBlur อีเวนต์แฮนด์เลอร์ onBlur ใช้ตอบสนองต่อ เหตุการณ์สำหรับออบเจ็กต่างๆ ที่อยู่บนฟอร์ม เกิดการสูญเสียโฟกัส (Focus) เช่นมีการกรอก ข้อมูลลงในฟอร์ม แล้วนำเมาส์ไปคลิ๊กบนพื้นที่ ที่ไม่ใช่ เป็นส่วนของฟอร์ม onBlur ก็จะทำงาน

7 ตัวอย่าง onBlur Example of onBlur Event Handler ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onBlur คลิ๊กเมาส์ลงในช่องกรอกข้อมูล แล้วคลิ๊กเมาส์นอกช่องกรอก ข้อมูลอีกครั้ง เชิญคลิ๊ก :

8 onChange เวนต์แฮนด์เลอร์ onChange ใช้ตอบสนองต่อ เหตุการณ์เมื่อมีการเปลี่ยนแปลงข้อมูลในฟิลด์ (Field) บนฟอร์ม

9 Example of onChange Event Handler function NewData(){ input=document.MyForm.Data.value; alert(" คุณเปลี่ยนค่าตัวเลขจาก 999 เป็น " + input ); } ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onChange เปลี่ยนค่าตัวเลขในช่องกรอกข้อมูล แล้วคลิ๊กเมาส์นอกช่องกรอกข้อมูลอีก ครั้ง Number:

10 onClick อีเวนต์แฮนด์เลอร์ onClick ใช้ตอบสนองต่อ เหตุการณ์เมื่อมีการกดคลิ๊กเมาส์ลงบนออบเจ็กต์ หรือพื้นที่ที่กำหนดบนฟอร์ม

11 Example of onClick Event Handler function DataName(){ name=document.MyForm.Data.value; alert(" สวัสดีคุณ " + name ); } ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onClick ป้อนชื่อแล้วคลิ๊กปุ่ม OK ชื่อ :

12 onFocus อีเวนต์แฮนด์เลอร์ onFocus ใช้ตอบสนองต่อ เหตุการณ์เมื่อออบเจ็กต์ที่กำหนดได้แอ็กทีฟ (Active) เช่นเมื่อคลิ๊กเมาส์ลงในช่องกรอก ข้อมูลจะทำให้อีเวนต์แฮนด์เลอร์ onFocus ทำงาน

13 Example of onFocus Event Handler ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onFocus คลิ๊กเมาส์ลงในช่องกรอกข้อมูล แล้วคลิ๊กเมาส์นอกช่องกรอก ข้อมูลอีกครั้ง เชิญคลิ๊ก :

14 onLoad อีเวนต์แฮนด์เลอร์ onLoad ใช้ตอบสนองต่อ เหตุการณ์ที่เกิดขึ้นจากการโหลดหน้าเว็บเพจ โดยต้องเขียนไว้ใน tag หรือ tag

15 Example of onLoad Event Handler function hello(){ alert(" ยินดีต้อนรับ...\n ขอให้มีความสุขกับการใช้งานจาวา สคริปต์ "); } ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onLoad

16 onMouseOver อีเวนต์แฮนด์เลอร์ onMouseOver ใช้ ตอบสนองต่อเหตุการณ์เมื่อมีการเลื่อนเมาส์ไป วางบน ออบเจ็กต์หรือพื้นที่ที่กำหนด เช่นเมื่อนำ เมาส์ไปวางบนรูปภาพจะทำให้อีเวนต์แฮนด์ เลอร์ onMouseOver ทำงาน

17 Example of onMouseOver Event Handler function hello() { alert(" ยินดีต้อนรับ...\n ขอให้มีความสุขกับการใช้งาน MouseOver Event Handler"); } ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onMouseOver กรุณาเลื่อนเมาส์เข้าไปในรูป

18 onMouseOut อีเวนต์แฮนด์เลอร์ onMouseOut ใช้ตอบสนอง ต่อเหตุการณ์เมื่อมีการเลื่อนเมาส์ออกจาก ออบเจ็กต์หรือพื้นที่ที่กำหนด เช่นเมื่อขณะที่ เมาส์วางอยู่บนรูปภาพแล้วเลื่อนเมาส์ออกจาก รูปภาพ จะทำให้อีเวนต์แฮนด์เลอร์ onMouseOut ทำงาน

19 Example of onMouseOut Event Handler function hello() { alert(" ยินดีต้อนรับ...\n ขอให้มีความสุขกับการใช้งาน MouseOut Event Handler"); } ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onMouseOut กรุณาเลื่อนเมาส์เข้าไปในรูป แล้วเลื่อนเมาส์ออกจากรูป

20 onReset อีเวนต์แฮนด์เลอร์ onReset ใช้ตอบสนองต่อ เหตุการณ์เมื่อมีกดปุ่ม Reset จะทำให้ข้อมูลที่ อยู่ ในฟอร์มนั้นหายไป โดยอีเวนต์แฮนด์เลอร์ onReset ต้องเขียนไว้ใน tag

21 Example of onReset Event Handler ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onReset กรุณาป้อนข้อมูลลงในช่องกรอกข้อความ แล้วกดปุ่ม Reset Data ป้อนข้อความ :

22 onSelect อีเวนต์แฮนด์เลอร์ onSelect ใช้ตอบสนองต่อ เหตุการณ์เมื่อมีการเลือกข้อมูลทั้งหมด หรือ บางส่วนของข้อมูลที่อยู่ใน Textfield

23 Example of onSelect Event Handler ตัวอย่างการใช้งานอีเวนต์แฮนด์เลอร์ onSelect กรุณาเลือกข้อความในช่องกรอกข้อความ


ดาวน์โหลด ppt การจัดการกับ เหตุการณ์ Event Handling ง 40208 การเขียนได นามิกเว็บเพจ ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม.

งานนำเสนอที่คล้ายกัน


Ads by Google