DCRUB

DCRUB

  • Articles: 1367

HTML5 การใช้งาน abbr Tag

ใน HTML5 แท็ก <abbr> ใช้สำหรับระบุคำย่อหรืออักษรย่อ เมื่อผู้ใช้วางเมาส์เหนือคำย่อ เบราว์เซอร์สามารถแสดงคำอธิบายแบบเต็มซึ่งถูกระบุไว้ในแอตทริบิวต์ title แท็กนี้ช่วยให้เนื้อหามีความชัดเจนมากขึ้น และยังช่วยปรับปรุง SEO ด้วยการอธิบายคำย่อที่ใช้ รูปแบบการใช้งานพื้นฐาน ข้อสำคัญ ตัวอย่างการใช้งาน การใช้คำย่อทั่วไป เมื่อผู้ใช้วางเมาส์เหนือคำว่า “USA” เบราว์เซอร์จะแสดงข้อความว่า “ประเทศสหรัฐอเมริกา” การใช้คำย่อที่เป็นอักษรย่อ เมื่อวางเมาส์เหนือคำว่า “GNU” ผู้ใช้จะเห็นคำอธิบายเต็ม การใช้คำย่อในฟอร์ม: เราสามารถใช้คำย่อในแบบฟอร์มเพื่อแสดงหน่วยวัด คำว่า “ซม.” จะแสดงคำเต็มว่า “เซนติเมตร” เมื่อวางเมาส์ด้านบน การใช้คำย่อกับโซนเวลา: เมื่อพูดถึงโซนเวลา เราสามารถใช้แท็ก <abbr> เมื่อวางเมาส์เหนือคำว่า “GMT” จะเห็นคำอธิบายว่า “เวลามาตรฐานกรีนิช” การเพิ่มประสิทธิภาพการเข้าถึง:…

HTML5 การใช้งาน a tag

ใน HTML5 แท็ก <a> (anchor tag) ใช้สำหรับสร้างลิงก์ที่สามารถนำผู้ใช้งานไปยังตำแหน่งอื่นภายในหน้าเว็บ หรือภายนอกเว็บไซต์ รวมถึงการทำปฏิสัมพันธ์อื่นๆ เช่น ดาวน์โหลดไฟล์ หรือการนำทางไปยังจุดหนึ่งในเอกสาร การใช้งานพื้นฐานของ <a> Tag สร้างลิงก์ไปยังหน้าเว็บอื่น เราสามารถใช้ <a> เพื่อสร้างลิงก์ไปยังเว็บไซต์อื่นโดยใช้แอตทริบิวต์ href (hyperlink reference) เพื่อระบุ URL ของเป้าหมาย เมื่อคลิกที่ลิงก์นี้ ผู้ใช้จะถูกนำไปยังเว็บไซต์ที่กำหนด การเชื่อมโยงภายในหน้าเดียวกัน เราสามารถลิงก์ไปยังส่วนต่างๆ ภายในหน้าเดียวกันโดยใช้ id สำหรับกำหนดตำแหน่งเป้าหมาย และใช้ href เป็น #id เมื่อคลิกที่ลิงก์ ผู้ใช้จะเลื่อนไปยังส่วนที่มี id=”section1″ ลิงก์สำหรับดาวน์โหลดไฟล์…

HTML5 การประกาศประเภทของเอกสาร (document type declaration)

แท็ก <!DOCTYPE> ใน HTML5 เป็นการประกาศประเภทของเอกสาร (document type declaration) ที่บอกให้เบราว์เซอร์รู้ว่าเอกสารนี้ใช้มาตรฐาน HTML เวอร์ชันใด เพื่อให้เบราว์เซอร์ประมวลผลและแสดงผลเว็บเพจได้อย่างถูกต้อง ใน HTML5 การประกาศ <!DOCTYPE> จะมีรูปแบบสั้นและง่ายกว่าเวอร์ชันก่อนหน้า ซึ่งมีลักษณะดังนี้ จุดประสงค์หลักของ <!DOCTYPE html> คือการแจ้งให้เบราว์เซอร์ทราบว่าเอกสารนี้ใช้มาตรฐาน HTML5 ซึ่งช่วยให้เบราว์เซอร์ทำงานในโหมดมาตรฐาน (standards mode) เพื่อให้การตีความโค้ดเป็นไปตามมาตรฐานที่ถูกต้อง ไม่เช่นนั้นอาจจะมีการทำงานใน “โหมดที่ไม่เป็นมาตรฐาน” (quirks mode) ซึ่งอาจทำให้การแสดงผลเพจไม่ถูกต้องตามที่ตั้งใจ แม้ว่าจะไม่ได้เป็นแท็ก HTML จริงๆ แต่ <!DOCTYPE> ก็เป็นส่วนสำคัญที่ต้องมีอยู่ในเอกสาร HTML เพื่อความเข้ากันได้ในการแสดงผลของเบราว์เซอร์ต่างๆ

HTML5 การใช้งาน Comment Tag

ใน HTML5 คอมเมนต์ (Comment Tag) ใช้ในการใส่คำอธิบายหรือข้อความที่ไม่ต้องการให้แสดงผลบนหน้าเว็บเบราว์เซอร์ โดยคอมเมนต์นี้จะถูกแสดงในโค้ดเพื่อให้ผู้พัฒนาเข้าใจโครงสร้างหรือการทำงานของโค้ดนั้นๆ โดยเบราว์เซอร์จะมองข้ามส่วนนี้ไปเมื่อทำการแสดงผลหน้าเว็บ รูปแบบการเขียนคอมเมนต์ใน HTML การเขียนคอมเมนต์ใน HTML ใช้รูปแบบดังนี้ ทุกอย่างที่อยู่ระหว่าง <!– และ –> จะไม่ถูกแสดงผลบนหน้าเว็บ ตัวอย่างการใช้งานทั่วไป ในตัวอย่างนี้ คอมเมนต์ที่อยู่ภายในโค้ดจะไม่ถูกแสดงบนหน้าเว็บ แต่จะช่วยให้ผู้พัฒนาเข้าใจว่าโค้ดแต่ละส่วนมีหน้าที่อะไร การประยุกต์ใช้งานคอมเมนต์ในรูปแบบต่างๆ ใช้เพื่อซ่อนโค้ดที่ไม่ต้องการให้แสดงผล บางครั้งเราอาจต้องการซ่อนส่วนของโค้ดบางส่วนที่ยังไม่ต้องการใช้งาน โดยการคอมเมนต์โค้ดส่วนนั้นออกไป ใช้ในการใส่คำอธิบายโค้ด (Documentation) ช่วยอธิบายโค้ดเพื่อให้ผู้พัฒนาคนอื่นหรือแม้แต่ตัวเองในภายหลังเข้าใจได้ง่าย ใช้เพื่อเว้นวรรคหรือจัดการโค้ดให้อ่านง่ายขึ้น การแทรกคอมเมนต์เป็นวิธีที่ดีในการแบ่งส่วนต่างๆ ของโค้ดให้ชัดเจน ใช้เพื่อป้องกันการแสดงผลคำสั่ง JavaScript ที่ยังไม่พร้อม หากต้องการหยุดการทำงานของสคริปต์บางส่วน เราสามารถใช้คอมเมนต์เพื่อซ่อนคำสั่งชั่วคราวได้ ข้อควรระวัง การใช้คอมเมนต์เป็นวิธีที่มีประโยชน์ในการพัฒนาเว็บเพจ โดยช่วยเพิ่มความเข้าใจในการพัฒนาโค้ด…

HTML5 การใช้งาน onunload Event Attribute

ใน HTML5, onunload เป็นหนึ่งใน Event Attribute ที่ใช้ในการตรวจจับเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้กำลังจะออกจากหน้าเว็บ ไม่ว่าจะเป็นการปิดหน้าเว็บ, การโหลดหน้าใหม่ หรือการย้ายไปยังลิงก์อื่นๆ ซึ่ง onunload จะถูกเรียกใช้ก่อนที่หน้าเว็บจะถูกออกจากไป การใช้งาน onunload ใน HTML5 เราสามารถกำหนด onunload Event Attribute ได้ทั้งในรูปแบบ inline (เช่นการกำหนดในแท็ก HTML โดยตรง) หรือใน JavaScript การใช้งานแบบ Inline ใน HTML ในตัวอย่างนี้เราจะเขียนฟังก์ชัน onunload ลงในแท็ก HTML โดยตรง ในตัวอย่างนี้ เมื่อผู้ใช้ทำการปิดหน้าต่างหรือออกจากหน้าเว็บ ฟังก์ชัน…

HTML5 การใช้งาน onstorage Event Attribute

ใน HTML5, onstorage เป็น Event Attribute ที่ทำงานเมื่อมีการเปลี่ยนแปลงข้อมูลใน Web Storage (localStorage หรือ sessionStorage) ในหน้าต่างเบราว์เซอร์อื่น ๆ ที่กำลังเปิดเว็บไซต์เดียวกันนั้นอยู่ ซึ่งจะถูกเรียกใช้เมื่อมีการเปลี่ยนแปลงข้อมูลใน storage ที่เกิดจากหน้าต่างเบราว์เซอร์อื่นๆ (ไม่ใช่หน้าปัจจุบัน) วิธีการใช้งาน onstorage 1. การใช้งานผ่าน HTML Attribute สามารถใช้งาน onstorage เป็น attribute ใน HTML ของแท็ก <body> หรือแท็กอื่น ๆ ได้ เช่น ในตัวอย่างนี้ ถ้ามีการเปลี่ยนแปลงข้อมูลใน localStorage…

HTML5 การใช้งาน onresize Event Attribute

onresize Event Attribute ใน HTML5 เป็นอีเวนต์ที่ใช้ตรวจจับการเปลี่ยนแปลงขนาดของหน้าต่างเบราว์เซอร์หรือขนาดขององค์ประกอบ (element) บางอย่างที่มีขนาดเปลี่ยนแปลง เช่น หากผู้ใช้งานทำการปรับขนาดของหน้าต่างเบราว์เซอร์ เหตุการณ์นี้จะถูกกระตุ้นขึ้น และเราสามารถใช้ JavaScript เพื่อดำเนินการเมื่อขนาดหน้าต่างเปลี่ยนแปลงได้ การใช้งาน onresize กับหน้าต่างเบราว์เซอร์ (window) การใช้งานทั่วไปคือการใช้ onresize กับหน้าต่างเบราว์เซอร์ เมื่อหน้าต่างถูกปรับขนาด การเขียนโค้ดเพื่อให้ทำบางสิ่งบางอย่างเมื่อหน้าต่างถูกขยายหรือย่อขนาดทำได้โดยใช้โค้ดต่อไปนี้ การใช้งาน onresize กับองค์ประกอบ HTML ในบางกรณี การตรวจจับการเปลี่ยนแปลงขนาดขององค์ประกอบ HTML อาจมีประโยชน์ เช่น ตรวจจับเมื่อ div ถูกปรับขนาด (ต้องการใช้ JavaScript ร่วมกับ CSS เพื่อสร้างการเปลี่ยนแปลงขนาด)…

HTML5 การใช้งาน onpopstate Event Attribute

onpopstate เป็น Event Attribute ใน HTML5 ที่ใช้สำหรับตรวจจับการเปลี่ยนแปลงใน session history ของเบราว์เซอร์ เช่น การกดปุ่ม “Back” หรือ “Forward” ในเบราว์เซอร์ เมื่อเหตุการณ์นี้ถูกเรียกขึ้น (เช่น เมื่อผู้ใช้เปลี่ยนหน้าไปที่สถานะก่อนหน้า) จะมีการส่ง Event พร้อมกับข้อมูลของสถานะปัจจุบันของ session history ผ่าน event.state วิธีใช้งานพื้นฐาน รูปแบบการใช้งานอื่น ๆ 1. การเปลี่ยนหน้าแบบไม่ต้องโหลดหน้าใหม่ หนึ่งในรูปแบบการใช้งานที่พบบ่อยที่สุดคือการสร้างเว็บแบบ Single Page Application (SPA) ซึ่งสามารถเปลี่ยนเนื้อหาโดยไม่ต้องโหลดหน้าใหม่ แต่ยังคงสามารถบันทึกสถานะการใช้งานของผู้ใช้ได้ผ่าน history.pushState() และ…

HTML5 การใช้งาน onpageshow Event Attribute

onpageshow เป็นหนึ่งใน Event Attributes ใน HTML5 ซึ่งถูกเรียกใช้งานเมื่อหน้าเว็บเพจแสดงผลขึ้นมา (ถูกโหลดเสร็จสมบูรณ์) โดยจะถูกกระตุ้นในสองสถานการณ์หลัก onpageshow จะทำงานได้ในแท็ก <body> หรือองค์ประกอบอื่น ๆ ของ HTML ผ่านการกำหนดเป็น event handler การใช้งาน onpageshow การกำหนดใน HTML โดยตรง สามารถกำหนดให้ onpageshow ทำงานได้โดยตรงในโค้ด HTML ผ่านการเขียนลงในแท็ก <body> หรือองค์ประกอบอื่น ๆ เมื่อเปิดหน้าเว็บหรือโหลดใหม่อีกครั้งจากแคช การแจ้งเตือนจะถูกแสดงขึ้นว่า “This page has been shown!” การใช้งานร่วมกับ…

HTML5 การใช้งาน onpagehide Event Attribute

onpagehide เป็น Event Attribute ใน HTML5 ที่ทำงานเมื่อหน้าถูกซ่อนหรือกำลังจะปิดลง (เช่นเมื่อผู้ใช้ไปที่หน้าใหม่ หรือเปิดแท็บใหม่) โดย Event นี้จะถูกเรียกก่อนที่หน้าเว็บจะถูกซ่อน ทำให้เราสามารถจัดการข้อมูลก่อนที่จะออกจากหน้าหรือทำบางอย่าง เช่น การบันทึกข้อมูล หรือการแจ้งเตือนผู้ใช้ว่าเขากำลังจะออกจากหน้านั้นๆ รูปแบบการใช้งาน onpagehide 1. การใช้งานใน HTML ในตัวอย่างนี้ เมื่อหน้าถูกซ่อน จะมีการแสดงข้อความแจ้งเตือนผู้ใช้ว่า “กำลังจะออกจากหน้านี้!” 2. การใช้งานใน JavaScript โดยตรง ในตัวอย่างนี้เมื่อหน้าถูกซ่อน ข้อความ “หน้าถูกซ่อนหรือกำลังจะถูกปิด” จะถูกแสดงใน Console ของเบราว์เซอร์ 3. การใช้งานร่วมกับฟังก์ชันการจัดการ Event ในกรณีนี้ใช้ addEventListener…

HTML5 การใช้งาน ononline Event Attribute

ononline เป็น Event Attribute ใน HTML5 ที่ใช้เพื่อตรวจสอบและจัดการเมื่อสถานะของการเชื่อมต่ออินเทอร์เน็ตเปลี่ยนเป็นออนไลน์ ซึ่งเป็นเหตุการณ์หนึ่งในระบบการจัดการสถานะการเชื่อมต่อของเบราว์เซอร์ เพื่อให้ผู้พัฒนาเว็บสามารถตอบสนองต่อการเชื่อมต่อหรือการขาดการเชื่อมต่อได้อย่างมีประสิทธิภาพ วิธีการใช้งาน ononline เราสามารถใช้ ononline ใน HTML ได้หลายวิธี ทั้งการกำหนด Event Attribute ภายในโค้ด HTML โดยตรง หรือใช้ JavaScript เพื่อควบคุมเหตุการณ์ การใช้ ononline ในโค้ด HTML ในตัวอย่างนี้ เราได้ใช้ ononline ในส่วน <body> โดยตรง เมื่อสถานะการเชื่อมต่อกลับมาเป็นออนไลน์ จะเกิดการแสดงการแจ้งเตือนขึ้นด้วยคำสั่ง alert() เพื่อแสดงข้อความว่า “You…

HTML5 การใช้งาน onoffline Event Attribute

onoffline และ ononline เป็น Event Attributes ที่ HTML5 มีไว้เพื่อช่วยตรวจจับสถานะการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้ โดยสามารถใช้เพื่อเพิ่มประสิทธิภาพการทำงานของเว็บแอปพลิเคชันที่ต้องการตรวจสอบสถานะการเชื่อมต่อได้ง่าย ๆ ไม่ว่าจะเป็นการเชื่อมต่ออยู่หรือไม่เชื่อมต่อ ซึ่งสามารถใช้งานได้ทั้งในส่วนของ <body> หรือในโค้ด JavaScript การใช้งาน onoffline และ ononline การใช้งานใน <body> ในตัวอย่างนี้ จะทำการตรวจสอบสถานะการเชื่อมต่อโดยตรงจากแท็ก <body> เมื่อมีการเปลี่ยนแปลงสถานะ จะเรียกฟังก์ชัน goOnline() หรือ goOffline() ขึ้นมาตามสถานะที่เกิดขึ้น การใช้งานผ่าน JavaScript เราสามารถใช้การฟังเหตุการณ์ (Event Listener) ผ่าน JavaScript เพื่อทำงานกับ onoffline…

HTML5 การใช้งาน onmessage Event Attribute

onmessage ใน HTML5 เป็น Event Attribute ที่ใช้สำหรับการรับข้อความ (message) ที่ส่งมาจาก Web Workers หรือจากหน้าต่างอื่น (เช่น ผ่าน postMessage() เมื่อมีการส่งข้อมูลระหว่าง iframe, window, หรือ web worker) ในกรณีที่มีการสื่อสารระหว่างกันผ่าน JavaScript การใช้งาน onmessage Event Attribute การใช้ onmessage กับ iframe และ postMessage() ในตัวอย่างนี้มีการสื่อสารระหว่างหน้าต่างหลักและ iframe ผ่าน onmessage และ postMessage() โดยการตรวจสอบ…

HTML5 การใช้งาน onhashchange Event Attribute

onhashchange เป็น event attribute ใน HTML5 ที่จะทำงานเมื่อ URL fragment identifier หรือ hash (ส่วนของ URL ที่อยู่หลังเครื่องหมาย #) เปลี่ยนแปลงไป เช่น เมื่อผู้ใช้เปลี่ยน hash ของ URL หรือเมื่อโปรแกรมทำการเปลี่ยนแปลง hash ค่าใหม่ใน URL รูปแบบการใช้งาน onhashchange มีหลากหลายวิธีในการใช้งาน onhashchange ทั้งจากการตั้งค่าผ่าน HTML attributes, JavaScript, และการใช้ event listener เรามาดูตัวอย่างแต่ละรูปแบบกันครับ การใช้งาน onhashchange…

HTML5 การใช้งาน onerror Event Attribute

onerror ใน HTML5 เป็น event attribute ที่ใช้ในการจัดการข้อผิดพลาดที่เกิดขึ้นในระหว่างการโหลดไฟล์ เช่น การโหลดรูปภาพ, ไฟล์สคริปต์, หรือเอกสารต่างๆ ที่มีข้อผิดพลาด ทำให้ไม่สามารถโหลดหรือประมวลผลได้สำเร็จ การใช้งาน onerror onerror สามารถใช้กับแท็ก HTML หลายประเภท เช่น <img>, <script>, <link> โดยจะเกิดเหตุการณ์เมื่อมีการโหลดข้อมูลล้มเหลวหรือมีข้อผิดพลาดในกระบวนการ รูปแบบการใช้งาน onerror ใช้งานกับรูปภาพ (<img>) เมื่อไม่สามารถโหลดรูปภาพได้ อาจเป็นเพราะไฟล์ไม่อยู่ในตำแหน่งที่ระบุ เราสามารถใช้ onerror เพื่อแทนที่รูปภาพที่ไม่สามารถโหลดได้ด้วยรูปภาพอื่น หากรูป invalid-image.jpg ไม่สามารถโหลดได้ ฟังก์ชัน onerror จะถูกเรียกและเปลี่ยนแปลง src…

HTML5 การใช้งาน onbeforeunload Event Attribute

onbeforeunload เป็น Event Attribute ใน HTML5 ที่จะถูกเรียกใช้งานเมื่อผู้ใช้พยายามออกจากหน้าปัจจุบัน เช่น ปิดแท็บ เบราว์เซอร์ หรือพยายามไปยัง URL อื่น ๆ ผ่านลิงก์หรือการโหลดใหม่ (reload) โดยเราสามารถใช้ onbeforeunload เพื่อแสดงคำเตือนให้ผู้ใช้ทราบถึงการกระทำที่อาจเกิดผลกระทบ เช่น การออกจากหน้านั้น ๆ อาจทำให้ข้อมูลที่ยังไม่ได้บันทึกสูญหาย วิธีการใช้งาน onbeforeunload เราสามารถกำหนด onbeforeunload ผ่าน 2 วิธีหลัก คือ ตัวอย่างการใช้งาน onbeforeunload การใช้งานใน HTML Attribute ในตัวอย่างนี้ ถ้าผู้ใช้พยายามปิดแท็บหรือเปลี่ยนหน้า เบราว์เซอร์จะแสดงคำเตือนว่า “Are…

HTML5 การใช้งาน onbeforeprint Event Attribute

onbeforeprint เป็น Event Attribute ใน HTML5 ที่จะถูกเรียกใช้งานเมื่อผู้ใช้กำลังจะพิมพ์หน้าเว็บ หรือเปิดหน้าเว็บในโหมดพิมพ์ (print preview) ก่อนที่กระบวนการพิมพ์จะเริ่มขึ้นจริง การใช้งาน onbeforeprint onbeforeprint ใช้ในการกำหนดฟังก์ชัน JavaScript ที่จะทำงานก่อนที่หน้าจะเข้าสู่โหมดการพิมพ์ ซึ่งสามารถนำไปใช้เพื่อปรับแต่งเอกสารก่อนพิมพ์ เช่น การซ่อนหรือแสดงบางส่วนของเนื้อหา ปรับรูปแบบ CSS หรือการโหลดทรัพยากรเพิ่มเติม วิธีการใช้งาน onbeforeprint สามารถใช้งานได้ใน 3 รูปแบบหลัก ดังนี้ 1. การใช้งานใน HTML โดยตรง ในตัวอย่างนี้ เมื่อผู้ใช้กดปุ่มพิมพ์ ฟังก์ชัน beforePrint() จะซ่อนเนื้อหาบางส่วนที่ไม่ต้องการให้แสดงตอนพิมพ์ และหลังจากการพิมพ์เสร็จ ฟังก์ชัน…

HTML5 การใช้งาน onafterprint Event Attribute

onafterprint เป็น Event Attribute ใน HTML5 ที่จะถูกเรียกใช้เมื่อกระบวนการพิมพ์ (Print) เอกสารเสร็จสิ้นแล้ว โดยเหตุการณ์นี้สามารถใช้เพื่อดำเนินการใด ๆ หลังจากที่ผู้ใช้ทำการพิมพ์เอกสารเสร็จ เช่น การเรียกฟังก์ชันเพื่อรีเฟรชหน้าเว็บ หรือทำให้บางองค์ประกอบกลับมาปรากฏในหน้าเว็บหลังจากซ่อนระหว่างการพิมพ์ รูปแบบการใช้งานของ onafterprint การใช้งานผ่าน Inline HTML: สามารถกำหนด event นี้ไว้ในองค์ประกอบ HTML โดยตรงผ่านการใส่ attribute onafterprint ตัวอย่างนี้ เมื่อผู้ใช้พิมพ์เอกสารเสร็จ ระบบจะทำการแสดงการแจ้งเตือนว่า “Print complete!” การใช้งานผ่าน JavaScript: สามารถผูก event onafterprint กับ window หรือ…

HTML5 การใช้งาน onload Event Attribute

onload เป็น Event Attribute ใน HTML5 ที่จะถูกเรียกใช้เมื่อมีการโหลดองค์ประกอบ (element) นั้น ๆ เสร็จสมบูรณ์ ตัวอย่างเช่น เมื่อโหลดหน้าเว็บเพจทั้งหมด รูปภาพ หรือ iframe เสร็จแล้ว จึงจะมีการเรียกใช้ฟังก์ชันที่กำหนดใน Event Attribute นี้ ลักษณะการใช้งานของ onload ใน HTML5 การใช้งาน onload กับ <body>: เมื่อมีการโหลดหน้าเว็บเพจเสร็จสมบูรณ์ (รวมทั้งองค์ประกอบต่าง ๆ เช่น รูปภาพ, CSS และไฟล์สคริปต์) เราสามารถใช้ onload เพื่อเรียกฟังก์ชันบางอย่าง เช่น…

HTML5 การใช้งาน SSE API

Server-Sent Events (SSE) เป็นเทคโนโลยีที่อนุญาตให้เซิร์ฟเวอร์ส่งข้อมูลไปยังเว็บเบราว์เซอร์โดยอัตโนมัติเมื่อมีข้อมูลใหม่ โดยไม่จำเป็นที่ฝั่งผู้ใช้จะต้องร้องขอ ซึ่งเป็นการทำงานแบบ push-based เหมาะสำหรับการแจ้งเตือนข้อมูลแบบเรียลไทม์ เช่น ข่าวสาร การอัพเดตข้อมูลในหน้าต่างๆ หรือแชทออนไลน์ การทำงานของ SSE วิธีการใช้งาน SSE ฝั่ง Client (HTML + JavaScript) ฝั่งเบราว์เซอร์จะใช้ EventSource ในการรับข้อมูลจากเซิร์ฟเวอร์ ในตัวอย่างนี้ใช้ EventSource เพื่อเชื่อมต่อกับเซิร์ฟเวอร์ที่ไฟล์ server.php และเมื่อได้รับข้อมูลก็จะอัปเดตข้อความใน <div> ที่มี id เป็น result ฝั่ง Server (PHP) เซิร์ฟเวอร์จะส่งข้อมูลเป็นข้อความในรูปแบบที่ SSE รองรับ…

HTML5 การใช้งาน Web Workers API

Web Workers API ใน HTML5 ถูกออกแบบมาเพื่อช่วยให้ JavaScript สามารถทำงานเบื้องหลัง (background) โดยไม่ทำให้หน้าเว็บค้างหรือช้าลง ซึ่ง Web Workers ช่วยให้สามารถรันสคริปต์ใน Thread แยกต่างหากจาก Thread หลัก (UI thread) ของเบราว์เซอร์ ทำให้หน้าเว็บยังคงตอบสนองต่อผู้ใช้ได้ในขณะที่มีการทำงานหนัก เช่น การคำนวณทางคณิตศาสตร์ การดึงข้อมูล หรือการประมวลผลอื่น ๆ ประเภทของ Web Workers Dedicated Workers ตัวอย่าง Shared Workers ตัวอย่าง Service Workers ตัวอย่าง การประยุกต์ใช้งาน…

HTML5 การใช้งาน Web Storage API

Web Storage API ใน HTML5 เป็นกลไกในการเก็บข้อมูลฝั่งผู้ใช้ (Client-Side) โดยไม่ต้องใช้คุกกี้ ช่วยให้สามารถเก็บข้อมูลได้มากขึ้นและรวดเร็วยิ่งขึ้น ซึ่งมีอยู่ 2 รูปแบบหลักคือ LocalStorage และ SessionStorage โดยทั้งสองมีการทำงานที่คล้ายกัน แต่มีความแตกต่างที่สำคัญในการจัดการอายุของข้อมูล LocalStorage การใช้งาน LocalStorage การอธิบายการใช้งาน SessionStorage การใช้งาน SessionStorage การอธิบายการใช้งาน การเปรียบเทียบระหว่าง LocalStorage และ SessionStorage คุณสมบัติ LocalStorage SessionStorage อายุของข้อมูล ถาวร จนกว่าจะถูกลบด้วยโค้ดหรือผู้ใช้ ชั่วคราว จนกว่าแท็บจะถูกปิด ขนาดข้อมูลที่เก็บได้ โดยทั่วไปอยู่ที่ 5MB…

HTML5 การใช้งาน Drag and Drop API

Drag and Drop API ใน HTML5 เป็นเครื่องมือที่ช่วยให้ผู้ใช้สามารถลากวาง (drag and drop) องค์ประกอบจากตำแหน่งหนึ่งไปยังอีกตำแหน่งหนึ่งได้ในเว็บเบราว์เซอร์ ซึ่งสามารถนำไปประยุกต์ใช้งานในหลายสถานการณ์ เช่น การย้ายไฟล์ รูปภาพ ข้อความ หรือองค์ประกอบ HTML ส่วนประกอบหลักของ Drag and Drop API การใช้งานหลัก ๆ ของ Drag and Drop API มีขั้นตอนหลักอยู่ 2 ฝั่ง คือ ขั้นตอนการใช้งาน Drag and Drop อีเวนต์สำคัญ ตัวอย่างโค้ด…

HTML5 การใช้งาน Geolocation API

Geolocation API ใน HTML5 ช่วยให้เราสามารถดึงพิกัดตำแหน่งของผู้ใช้ (เช่น ละติจูดและลองจิจูด) มาใช้งานในเว็บไซต์หรือเว็บแอปพลิเคชันได้ โดยไม่จำเป็นต้องติดตั้งปลั๊กอินเสริม โดยข้อมูลตำแหน่งนี้สามารถนำไปใช้ในหลายสถานการณ์ เช่น ระบบนำทาง, การแสดงผลตำแหน่งบนแผนที่, หรือการแสดงข้อมูลที่เกี่ยวข้องกับตำแหน่งของผู้ใช้ การใช้งาน Geolocation API การใช้งาน Geolocation API ต้องมีการร้องขอสิทธิ์จากผู้ใช้เสียก่อน ผ่านฟังก์ชันหลัก 3 ฟังก์ชัน คือ ตัวอย่างการใช้งานแต่ละรูปแบบ getCurrentPosition() ใช้เพื่อดึงพิกัดตำแหน่งปัจจุบันของผู้ใช้ โดยโค้ดนี้จะทำการร้องขอสิทธิ์จากผู้ใช้เพื่อรับข้อมูลตำแหน่ง watchPosition() ใช้เพื่อติดตามตำแหน่งของผู้ใช้ในขณะที่ผู้ใช้อยู่ในระหว่างการเคลื่อนที่ การประยุกต์ใช้ Geolocation API 1. การแสดงตำแหน่งผู้ใช้บนแผนที่: เราสามารถใช้ Geolocation API ร่วมกับ…