HTML5 - คู่มือฉบับย่อ

HTML5 เป็นการแก้ไขที่สำคัญครั้งต่อไปของมาตรฐาน HTML แทนที่ HTML 4.01, XHTML 1.0 และ XHTML 1.1 HTML5 เป็นมาตรฐานสำหรับการจัดโครงสร้างและการนำเสนอเนื้อหาบนเวิลด์ไวด์เว็บ

HTML5 เป็นความร่วมมือระหว่าง World Wide Web Consortium (W3C) และ Web Hypertext Application Technology Working Group (WHATWG)

มาตรฐานใหม่นี้รวมคุณสมบัติต่างๆเช่นการเล่นวิดีโอและการลากแล้วปล่อยซึ่งก่อนหน้านี้ขึ้นอยู่กับปลั๊กอินของเบราว์เซอร์ของ บริษัท อื่นเช่น Adobe Flash, Microsoft Silverlight และ Google Gears

รองรับเบราว์เซอร์

เวอร์ชันล่าสุดของ Apple Safari, Google Chrome, Mozilla Firefox และ Opera ทั้งหมดรองรับคุณลักษณะ HTML5 มากมายและ Internet Explorer 9.0 จะรองรับฟังก์ชัน HTML5 บางอย่างด้วย

เว็บเบราว์เซอร์บนมือถือที่ติดตั้งมาล่วงหน้าบน iPhone, iPads และโทรศัพท์ Android ทั้งหมดรองรับ HTML5 ได้อย่างดีเยี่ยม

คุณสมบัติใหม่

HTML5 แนะนำองค์ประกอบและแอตทริบิวต์ใหม่จำนวนมากที่สามารถช่วยคุณในการสร้างเว็บไซต์สมัยใหม่ นี่คือชุดของคุณลักษณะที่โดดเด่นที่สุดที่นำมาใช้ใน HTML5

  • New Semantic Elements - สิ่งเหล่านี้เหมือนกับ <header>, <footer> และ <section>

  • Forms 2.0 - การปรับปรุงรูปแบบเว็บ HTML ที่มีการแนะนำแอตทริบิวต์ใหม่สำหรับแท็ก <input>

  • Persistent Local Storage - เพื่อให้บรรลุโดยไม่ต้องใช้ปลั๊กอินของบุคคลที่สาม

  • WebSocket - เทคโนโลยีการสื่อสารแบบสองทิศทางรุ่นใหม่สำหรับเว็บแอปพลิเคชัน

  • Server-Sent Events - HTML5 แนะนำเหตุการณ์ที่ไหลจากเว็บเซิร์ฟเวอร์ไปยังเว็บเบราว์เซอร์และเรียกว่า Server-Sent Events (SSE)

  • Canvas - รองรับพื้นผิวรูปวาดสองมิติที่คุณสามารถตั้งโปรแกรมด้วย JavaScript

  • Audio & Video - คุณสามารถฝังเสียงหรือวิดีโอบนหน้าเว็บของคุณได้โดยไม่ต้องใช้ปลั๊กอินของบุคคลที่สาม

  • Geolocation - ตอนนี้ผู้เยี่ยมชมสามารถเลือกที่จะแบ่งปันตำแหน่งทางกายภาพของตนกับเว็บแอปพลิเคชันของคุณ

  • Microdata - สิ่งนี้ช่วยให้คุณสร้างคำศัพท์ของคุณเองนอกเหนือจาก HTML5 และขยายหน้าเว็บของคุณด้วยความหมายที่กำหนดเอง

  • Drag and drop - ลากและวางรายการจากที่หนึ่งไปยังอีกที่หนึ่งบนหน้าเว็บเดียวกัน

ความเข้ากันได้ย้อนหลัง

HTML5 ได้รับการออกแบบให้เข้ากันได้มากที่สุดกับเว็บเบราว์เซอร์ที่มีอยู่ คุณลักษณะใหม่นี้สร้างขึ้นจากคุณลักษณะที่มีอยู่และช่วยให้คุณสามารถจัดหาเนื้อหาสำรองสำหรับเบราว์เซอร์รุ่นเก่าได้

ขอแนะนำให้ตรวจหาการสนับสนุนคุณลักษณะ HTML5 แต่ละรายการโดยใช้ JavaScript สองสามบรรทัด

หากคุณไม่คุ้นเคยกับ HTML เวอร์ชันก่อนหน้าฉันขอแนะนำให้คุณอ่าน HTML Tutorial ก่อนที่จะสำรวจคุณลักษณะของ HTML5

ภาษา HTML 5 มีไวยากรณ์ HTML แบบ "กำหนดเอง" ที่เข้ากันได้กับเอกสาร HTML 4 และ XHTML1 ที่เผยแพร่บนเว็บ แต่ไม่สามารถใช้งานร่วมกับคุณลักษณะ SGML ที่ลึกลับของ HTML 4 ได้

HTML 5 ไม่มีกฎไวยากรณ์เดียวกันกับ XHTML ที่เราต้องการชื่อแท็กตัวพิมพ์เล็กโดยอ้างถึงแอตทริบิวต์ของเราแอตทริบิวต์ต้องมีค่าและเพื่อปิดองค์ประกอบว่างทั้งหมด

HTML5 มาพร้อมกับความยืดหยุ่นมากมายและรองรับคุณสมบัติดังต่อไปนี้ -

  • ชื่อแท็กตัวพิมพ์ใหญ่
  • เครื่องหมายคำพูดเป็นทางเลือกสำหรับแอตทริบิวต์
  • ค่าแอตทริบิวต์เป็นทางเลือก
  • การปิดองค์ประกอบว่างเป็นทางเลือก

DOCTYPE

DOCTYPE ใน HTML เวอร์ชันเก่ามีความยาวมากกว่าเนื่องจากภาษา HTML ใช้ SGML ดังนั้นจึงจำเป็นต้องมีการอ้างอิงถึง DTD

ผู้เขียน HTML 5 จะใช้ไวยากรณ์อย่างง่ายเพื่อระบุ DOCTYPE ดังนี้ -

<!DOCTYPE html>

ไวยากรณ์ข้างต้นไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่

การเข้ารหัสอักขระ

ผู้เขียน HTML 5 สามารถใช้ไวยากรณ์อย่างง่ายเพื่อระบุการเข้ารหัสอักขระได้ดังนี้ -

<meta charset = "UTF-8">

ไวยากรณ์ข้างต้นไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่

แท็ก <script>

เป็นเรื่องปกติที่จะเพิ่มแอตทริบิวต์ประเภทที่มีค่า "text / javascript" ให้กับองค์ประกอบสคริปต์ดังนี้ -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 จะลบข้อมูลเพิ่มเติมที่จำเป็นและคุณสามารถใช้ไวยากรณ์ต่อไปนี้ -

<script src = "scriptfile.js"></script>

แท็ก <link>

จนถึงตอนนี้คุณกำลังเขียน <link> ดังนี้ -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 จะลบข้อมูลเพิ่มเติมที่จำเป็นและคุณสามารถใช้ไวยากรณ์ต่อไปนี้ -

<link rel = "stylesheet" href = "stylefile.css">

HTML5 องค์ประกอบ

องค์ประกอบ HTML5 ถูกมาร์กอัปโดยใช้แท็กเริ่มต้นและแท็กปิดท้าย แท็กถูกคั่นด้วยวงเล็บเหลี่ยมโดยมีชื่อแท็กคั่นกลาง

ความแตกต่างระหว่างแท็กเริ่มต้นและแท็กปิดท้ายคือแท็กหลังมีเครื่องหมายทับก่อนชื่อแท็ก

ต่อไปนี้เป็นตัวอย่างขององค์ประกอบ HTML5 -

<p>...</p>

ชื่อแท็ก HTML5 ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และอาจเขียนด้วยตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กทั้งหมดแม้ว่าหลักการทั่วไปจะใช้ตัวพิมพ์เล็ก

องค์ประกอบส่วนใหญ่มีเนื้อหาบางส่วนเช่น <p> ... </p> ประกอบด้วยย่อหน้า อย่างไรก็ตามองค์ประกอบบางอย่างถูกห้ามมิให้มีเนื้อหาใด ๆ เลยและองค์ประกอบเหล่านี้เรียกว่าองค์ประกอบโมฆะ ตัวอย่างเช่น,br, hr, link, metaฯลฯ

นี่คือรายการองค์ประกอบ HTML5ทั้งหมด

HTML5 แอตทริบิวต์

องค์ประกอบอาจมีแอตทริบิวต์ที่ใช้ในการตั้งค่าคุณสมบัติต่างๆขององค์ประกอบ

แอตทริบิวต์บางอย่างได้รับการกำหนดทั่วโลกและสามารถใช้ได้กับองค์ประกอบใด ๆ ในขณะที่คุณลักษณะอื่น ๆ กำหนดไว้สำหรับองค์ประกอบเฉพาะเท่านั้น แอตทริบิวต์ทั้งหมดมีชื่อและค่าและมีลักษณะดังที่แสดงด้านล่างในตัวอย่าง

ต่อไปนี้เป็นตัวอย่างของแอตทริบิวต์ HTML5 ซึ่งแสดงให้เห็นถึงวิธีการมาร์กอัปองค์ประกอบ div ด้วยแอตทริบิวต์ชื่อคลาสโดยใช้ค่า "example" -

<div class = "example">...</div>

สามารถระบุแอตทริบิวต์ได้ภายในแท็กเริ่มต้นเท่านั้นและห้ามใช้ในแท็กปิดท้าย

แอตทริบิวต์ HTML5 ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และอาจเขียนเป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กทั้งหมดแม้ว่าหลักการทั่วไปจะใช้ตัวพิมพ์เล็ก

นี่คือรายการแอตทริบิวต์ HTML5ทั้งหมด

เอกสาร HTML5

แท็กต่อไปนี้ได้รับการแนะนำเพื่อโครงสร้างที่ดีขึ้น -

  • section- แท็กนี้แสดงถึงส่วนเอกสารหรือแอปพลิเคชันทั่วไป สามารถใช้ร่วมกับ h1-h6 เพื่อระบุโครงสร้างเอกสาร

  • article - แท็กนี้แสดงถึงเนื้อหาที่เป็นอิสระของเอกสารเช่นรายการบล็อกหรือบทความในหนังสือพิมพ์

  • aside - แท็กนี้แสดงถึงเนื้อหาส่วนหนึ่งที่เกี่ยวข้องกับส่วนที่เหลือของหน้าเพียงเล็กน้อย

  • header - แท็กนี้แสดงถึงส่วนหัวของส่วน

  • footer - แท็กนี้แสดงถึงส่วนท้ายของส่วนและอาจมีข้อมูลเกี่ยวกับผู้แต่งข้อมูลลิขสิทธิ์และอื่น ๆ

  • nav - แท็กนี้แสดงถึงส่วนของเอกสารที่มีไว้สำหรับการนำทาง

  • dialog - แท็กนี้สามารถใช้เพื่อทำเครื่องหมายการสนทนา

  • figure - แท็กนี้สามารถใช้เพื่อเชื่อมโยงคำอธิบายภาพเข้ากับเนื้อหาที่ฝังไว้เช่นกราฟิกหรือวิดีโอ

มาร์กอัปสำหรับเอกสาร HTML 5 จะมีลักษณะดังต่อไปนี้ -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>
<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตามที่อธิบายไว้ในบทที่แล้วองค์ประกอบอาจมีแอตทริบิวต์ที่ใช้ในการตั้งค่าคุณสมบัติต่างๆขององค์ประกอบ

แอตทริบิวต์บางอย่างได้รับการกำหนดทั่วโลกและสามารถใช้ได้กับองค์ประกอบใด ๆ ในขณะที่คุณลักษณะอื่น ๆ กำหนดไว้สำหรับองค์ประกอบเฉพาะเท่านั้น แอตทริบิวต์ทั้งหมดมีชื่อและค่าและมีลักษณะดังที่แสดงด้านล่างในตัวอย่าง

ต่อไปนี้เป็นตัวอย่างของแอตทริบิวต์ HTML5 ซึ่งแสดงให้เห็นถึงวิธีการมาร์กอัปองค์ประกอบ div ด้วยแอตทริบิวต์ที่มีชื่อว่า class โดยใช้ค่า "example" -

<div class = "example">...</div>

สามารถระบุแอตทริบิวต์ได้ภายใน start tags และห้ามใช้ใน end tags.

แอตทริบิวต์ HTML5 ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และอาจเขียนเป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กทั้งหมดแม้ว่าหลักการทั่วไปจะใช้ตัวพิมพ์เล็ก

คุณสมบัติมาตรฐาน

แอตทริบิวต์ที่แสดงด้านล่างได้รับการสนับสนุนโดยแท็ก HTML 5 เกือบทั้งหมด

แอตทริบิวต์ ตัวเลือก ฟังก์ชัน
คีย์การเข้าถึง ผู้ใช้กำหนด ระบุแป้นพิมพ์ลัดเพื่อเข้าถึงองค์ประกอบ
จัดตำแหน่ง ขวาซ้ายตรงกลาง จัดเรียงแท็กในแนวนอน
พื้นหลัง URL วางภาพพื้นหลังไว้ด้านหลังองค์ประกอบ
bgcolor ค่าตัวเลขฐานสิบหก RGB วางสีพื้นหลังไว้ด้านหลังองค์ประกอบ
ชั้นเรียน ผู้ใช้กำหนด จำแนกองค์ประกอบสำหรับใช้กับ Cascading Style Sheets
พอใจ ถูกผิด ระบุว่าผู้ใช้สามารถแก้ไขเนื้อหาขององค์ประกอบได้หรือไม่
เมนูบริบท รหัสเมนู ระบุเมนูบริบทสำหรับองค์ประกอบ
ข้อมูล -XXX ผู้ใช้กำหนด แอตทริบิวต์ที่กำหนดเอง ผู้เขียนเอกสาร HTML สามารถกำหนดคุณลักษณะของตนเองได้ ต้องขึ้นต้นด้วย "data-"
ลากได้ จริงเท็จอัตโนมัติ ระบุว่าผู้ใช้ได้รับอนุญาตให้ลากองค์ประกอบหรือไม่
ความสูง ค่าตัวเลข ระบุความสูงของตารางรูปภาพหรือเซลล์ตาราง
ซ่อนอยู่ ซ่อนอยู่ ระบุว่าควรมองเห็นองค์ประกอบหรือไม่
id ผู้ใช้กำหนด ตั้งชื่อองค์ประกอบเพื่อใช้กับ Cascading Style Sheets
สิ่งของ รายการองค์ประกอบ ใช้ในการจัดกลุ่มองค์ประกอบ
itemprop รายชื่อรายการ ใช้ในการจัดกลุ่มรายการ
ตรวจสอบการสะกด ถูกผิด ระบุว่าองค์ประกอบต้องมีการตรวจการสะกดหรือไวยากรณ์หรือไม่
สไตล์ CSS สไตล์ชีต ระบุสไตล์อินไลน์สำหรับองค์ประกอบ
เรื่อง ผู้ใช้กำหนด id ระบุรายการที่เกี่ยวข้องขององค์ประกอบ
tabindex หมายเลขแท็บ ระบุลำดับแท็บขององค์ประกอบ
หัวข้อ ผู้ใช้กำหนด ชื่อ "ป๊อปอัป" สำหรับองค์ประกอบของคุณ
กล้าหาญ ด้านบนกลางด้านล่าง จัดเรียงแท็กในแนวตั้งภายในองค์ประกอบ HTML
ความกว้าง ค่าตัวเลข ระบุความกว้างของตารางรูปภาพหรือเซลล์ตาราง

สำหรับรายการแท็ก HTML5 และแอตทริบิวต์ที่เกี่ยวข้องทั้งหมดโปรดตรวจสอบการอ้างอิงแท็ก HTML5 ของเรา

แอตทริบิวต์ที่กำหนดเอง

คุณลักษณะใหม่ที่นำมาใช้ใน HTML 5 คือการเพิ่มแอตทริบิวต์ข้อมูลที่กำหนดเอง

แอตทริบิวต์ข้อมูลที่กำหนดเองเริ่มต้นด้วย data-และจะตั้งชื่อตามความต้องการของคุณ นี่คือตัวอย่างง่ายๆ -

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

รหัสข้างต้นจะเป็น HTML5 ที่ถูกต้องอย่างสมบูรณ์แบบด้วยสองแอตทริบิวต์ที่กำหนดเองที่เรียกว่าdatasubjectและข้อมูลระดับ คุณจะสามารถรับค่าของแอตทริบิวต์เหล่านี้โดยใช้ JavaScript APIs หรือ CSS ในลักษณะเดียวกันกับที่คุณได้รับสำหรับแอตทริบิวต์มาตรฐาน

เมื่อผู้ใช้เยี่ยมชมเว็บไซต์ของคุณพวกเขาทำกิจกรรมต่างๆเช่นคลิกที่ข้อความรูปภาพและลิงก์วางเมาส์เหนือองค์ประกอบที่กำหนดเป็นต้นสิ่งเหล่านี้คือตัวอย่างของสิ่งที่ JavaScript เรียก events.

เราสามารถเขียนตัวจัดการเหตุการณ์ของเราใน Javascript หรือ VBscript และคุณสามารถระบุตัวจัดการเหตุการณ์เหล่านี้เป็นค่าของแอตทริบิวต์แท็กเหตุการณ์ ข้อกำหนด HTML5 กำหนดแอตทริบิวต์เหตุการณ์ต่างๆตามรายการด้านล่าง -

เราสามารถใช้ชุดแอตทริบิวต์ต่อไปนี้เพื่อเรียกใช้ javascript หรือ vbscript รหัสที่กำหนดให้เป็นค่าเมื่อมีเหตุการณ์ใด ๆ เกิดขึ้นสำหรับองค์ประกอบ HTML5 ใด ๆ

เราจะกล่าวถึงเหตุการณ์เฉพาะขององค์ประกอบในขณะที่พูดถึงองค์ประกอบเหล่านั้นโดยละเอียดในบทต่อ ๆ ไป

แอตทริบิวต์ มูลค่า คำอธิบาย
ออฟไลน์ สคริปต์ ทริกเกอร์เมื่อเอกสารออฟไลน์
onabort สคริปต์ ทริกเกอร์เหตุการณ์ยกเลิก
หลังจากพิมพ์ สคริปต์ ทริกเกอร์หลังจากพิมพ์เอกสาร
onbeforeonload สคริปต์ ทริกเกอร์ก่อนโหลดเอกสาร
onbeforeprint สคริปต์ ทริกเกอร์ก่อนพิมพ์เอกสาร
onblur สคริปต์ ทริกเกอร์เมื่อหน้าต่างสูญเสียโฟกัส
oncanplay สคริปต์ ทริกเกอร์เมื่อสื่อเริ่มเล่นได้ แต่อาจต้องหยุดเพื่อบัฟเฟอร์
oncanplaythrough สคริปต์ ทริกเกอร์เมื่อสามารถเล่นสื่อจนจบโดยไม่ต้องหยุดบัฟเฟอร์
onchange สคริปต์ ทริกเกอร์เมื่อองค์ประกอบเปลี่ยนแปลง
เมื่อคลิก สคริปต์ ทริกเกอร์เมื่อคลิกเมาส์
oncontextmenu สคริปต์ ทริกเกอร์เมื่อเมนูบริบทถูกทริกเกอร์
ondblclick สคริปต์ ทริกเกอร์เมื่อดับเบิลคลิกเมาส์
ondrag สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกลาก
ondragend สคริปต์ ทริกเกอร์เมื่อสิ้นสุดการดำเนินการลาก
ondragenter สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกลากไปยังเป้าหมายการดร็อปที่ถูกต้อง
ondragleave สคริปต์ ทริกเกอร์เมื่อองค์ประกอบออกจากเป้าหมายการดร็อปที่ถูกต้อง
ondragover สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกลากผ่านเป้าหมายการดร็อปที่ถูกต้อง
ondragstart สคริปต์ ทริกเกอร์เมื่อเริ่มดำเนินการลาก
ondrop สคริปต์ ทริกเกอร์เมื่อองค์ประกอบที่ลากจะถูกทิ้ง
ondurationchange สคริปต์ ทริกเกอร์เมื่อความยาวของสื่อเปลี่ยนไป
ยกเว้น สคริปต์ ทริกเกอร์เมื่อองค์ประกอบทรัพยากรสื่อว่างเปล่าอย่างกะทันหัน
onended สคริปต์ ทริกเกอร์เมื่อสื่อถึงจุดสิ้นสุด
ความผิดพลาด สคริปต์ ทริกเกอร์เมื่อเกิดข้อผิดพลาด
ออนโฟกัส สคริปต์ ทริกเกอร์เมื่อหน้าต่างได้รับโฟกัส
onformchange สคริปต์ ทริกเกอร์เมื่อฟอร์มเปลี่ยนไป
onforminput สคริปต์ ทริกเกอร์เมื่อฟอร์มได้รับการป้อนข้อมูลของผู้ใช้
onhaschange สคริปต์ ทริกเกอร์เมื่อเอกสารมีการเปลี่ยนแปลง
oninput สคริปต์ ทริกเกอร์เมื่อองค์ประกอบได้รับการป้อนข้อมูลของผู้ใช้
oninvalid สคริปต์ ทริกเกอร์เมื่อองค์ประกอบไม่ถูกต้อง
onkeydown สคริปต์ ทริกเกอร์เมื่อกดปุ่ม
onkeypress สคริปต์ ทริกเกอร์เมื่อกดและปล่อยคีย์
onkeyup สคริปต์ ทริกเกอร์เมื่อปล่อยคีย์
onload สคริปต์ ทริกเกอร์เมื่อเอกสารโหลด
onloadeddata สคริปต์ ทริกเกอร์เมื่อโหลดข้อมูลสื่อ
onloadedmetadata สคริปต์ ทริกเกอร์เมื่อโหลดระยะเวลาและข้อมูลสื่ออื่น ๆ ขององค์ประกอบสื่อ
onloadstart สคริปต์ ทริกเกอร์เมื่อเบราว์เซอร์เริ่มโหลดข้อมูลสื่อ
onmessage สคริปต์ ทริกเกอร์เมื่อข้อความถูกทริกเกอร์
onmousedown สคริปต์ ทริกเกอร์เมื่อกดปุ่มเมาส์
onmousemove สคริปต์ ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนที่
onmouseout สคริปต์ ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนออกจากองค์ประกอบ
onmouseover สคริปต์ ทริกเกอร์เมื่อตัวชี้เมาส์เลื่อนไปที่องค์ประกอบ
onmouseup สคริปต์ ทริกเกอร์เมื่อปล่อยปุ่มเมาส์
onmousewheel สคริปต์ ทริกเกอร์เมื่อล้อเมาส์กำลังหมุน
ออนไลน์ สคริปต์ ทริกเกอร์เมื่อเอกสารออฟไลน์
Onoine สคริปต์ ทริกเกอร์เมื่อเอกสารออนไลน์
ออนไลน์ สคริปต์ ทริกเกอร์เมื่อเอกสารออนไลน์
onpagehide สคริปต์ ทริกเกอร์เมื่อหน้าต่างซ่อนอยู่
onpageshow สคริปต์ ทริกเกอร์เมื่อมองเห็นหน้าต่าง
หยุดชั่วคราว สคริปต์ ทริกเกอร์เมื่อข้อมูลสื่อหยุดชั่วคราว
onplay สคริปต์ ทริกเกอร์เมื่อข้อมูลสื่อกำลังจะเริ่มเล่น
กำลังเล่น สคริปต์ ทริกเกอร์เมื่อข้อมูลสื่อเริ่มเล่น
onpopstate สคริปต์ ทริกเกอร์เมื่อประวัติของหน้าต่างเปลี่ยนไป
onprogress สคริปต์ ทริกเกอร์เมื่อเบราว์เซอร์กำลังดึงข้อมูลสื่อ
onratechange สคริปต์ ทริกเกอร์เมื่ออัตราการเล่นข้อมูลสื่อเปลี่ยนไป
onreadystatechange สคริปต์ ทริกเกอร์เมื่อสถานะพร้อมเปลี่ยน
onredo สคริปต์ ทริกเกอร์เมื่อเอกสารดำเนินการทำซ้ำ
ปรับขนาด สคริปต์ ทริกเกอร์เมื่อปรับขนาดหน้าต่าง
onscroll สคริปต์ ทริกเกอร์เมื่อแถบเลื่อนขององค์ประกอบกำลังถูกเลื่อน
onseeked สคริปต์ ทริกเกอร์เมื่อแอตทริบิวต์การค้นหาขององค์ประกอบสื่อไม่เป็นจริงอีกต่อไปและการค้นหาสิ้นสุดลง
onseeking สคริปต์ ทริกเกอร์เมื่อแอตทริบิวต์การค้นหาขององค์ประกอบสื่อเป็นจริงและการค้นหาได้เริ่มขึ้นแล้ว
เลือก สคริปต์ ทริกเกอร์เมื่อองค์ประกอบถูกเลือก
ติดตั้ง สคริปต์ ทริกเกอร์เมื่อมีข้อผิดพลาดในการดึงข้อมูลสื่อ
ที่จัดเก็บ สคริปต์ ทริกเกอร์เมื่อเอกสารโหลด
onsubmit สคริปต์ ทริกเกอร์เมื่อส่งแบบฟอร์ม
onsuspend สคริปต์ ทริกเกอร์เมื่อเบราว์เซอร์ดึงข้อมูลสื่อ แต่หยุดก่อนที่จะดึงไฟล์สื่อทั้งหมด
ontimeupdate สคริปต์ ทริกเกอร์เมื่อสื่อเปลี่ยนตำแหน่งการเล่น
onundo สคริปต์ ทริกเกอร์เมื่อเอกสารดำเนินการเลิกทำ
onunload สคริปต์ ทริกเกอร์เมื่อผู้ใช้ออกจากเอกสาร
onvolumechange สคริปต์ ทริกเกอร์เมื่อสื่อเปลี่ยนระดับเสียงและเมื่อตั้งค่าระดับเสียงเป็น "ปิดเสียง"
กำลังรอ สคริปต์ ทริกเกอร์เมื่อสื่อหยุดเล่น แต่คาดว่าจะกลับมาทำงานต่อ

Web Forms 2.0 เป็นส่วนขยายของฟีเจอร์ฟอร์มที่พบใน HTML4 องค์ประกอบรูปแบบและแอตทริบิวต์ใน HTML5 ให้การมาร์กอัปเชิงความหมายในระดับที่สูงกว่า HTML4 และปลดปล่อยเราจากการเขียนสคริปต์และรูปแบบที่น่าเบื่อมากมายที่จำเป็นใน HTML4

องค์ประกอบ <input> ใน HTML4

องค์ประกอบอินพุต HTML4 ใช้ไฟล์ type แอตทริบิวต์เพื่อระบุประเภทข้อมูล HTML4 มีประเภทต่อไปนี้ -

ซีเนียร์ ประเภทและคำอธิบาย
1

text

ช่องข้อความรูปแบบอิสระไม่มีการแบ่งบรรทัดในนาม
2

password

ช่องข้อความรูปแบบอิสระสำหรับข้อมูลที่ละเอียดอ่อนโดยไม่ต้องขึ้นบรรทัดใหม่
3

checkbox

ชุดของค่าศูนย์หรือมากกว่าจากรายการที่กำหนดไว้ล่วงหน้า
4

radio

ค่าที่แจกแจง
5

submit

ปุ่มรูปแบบอิสระเริ่มต้นการส่งแบบฟอร์ม
6

file

ไฟล์โดยพลการที่มีประเภท MIME และสามารถเลือกชื่อไฟล์ได้
7

image

พิกัดสัมพันธ์กับขนาดของรูปภาพหนึ่ง ๆ โดยมีความหมายพิเศษว่าจะต้องเป็นค่าสุดท้ายที่เลือกและเริ่มการส่งแบบฟอร์ม
8

hidden

สตริงที่กำหนดเองซึ่งโดยปกติจะไม่แสดงต่อผู้ใช้
9

select

ค่าที่แจกแจงเหมือนกับประเภทวิทยุ
10

textarea

ช่องข้อความรูปแบบอิสระโดยไม่มีข้อ จำกัด ในการแบ่งบรรทัด
11

button

ปุ่มรูปแบบอิสระที่สามารถเริ่มต้นเหตุการณ์ที่เกี่ยวข้องกับปุ่ม

ต่อไปนี้เป็นตัวอย่างง่ายๆของการใช้ป้ายกำกับปุ่มตัวเลือกและปุ่มส่ง -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

องค์ประกอบ <input> ใน HTML5

นอกเหนือจากแอตทริบิวต์ที่กล่าวถึงข้างต้นองค์ประกอบอินพุต HTML5 ยังนำเสนอค่าใหม่หลายค่าสำหรับไฟล์ typeแอตทริบิวต์ เหล่านี้แสดงไว้ด้านล่าง

NOTE - ลองใช้ตัวอย่างต่อไปนี้ทั้งหมดโดยใช้เวอร์ชันล่าสุดของ Opera เบราว์เซอร์

ซีเนียร์ ประเภทและคำอธิบาย
1 วันเวลา

วันที่และเวลา (ปีเดือนวันชั่วโมงนาทีวินาทีเศษส่วนของวินาที) เข้ารหัสตามมาตรฐาน ISO 8601 โดยตั้งค่าเขตเวลาเป็น UTC
2 วันที่และเวลาท้องถิ่น

วันที่และเวลา (ปีเดือนวันชั่วโมงนาทีวินาทีเศษส่วนของวินาที) เข้ารหัสตามมาตรฐาน ISO 8601 โดยไม่มีข้อมูลเขตเวลา
3 วันที่

วันที่ (ปีเดือนวัน) เข้ารหัสตามมาตรฐาน ISO 8601
4 เดือน

วันที่ประกอบด้วยปีและเดือนที่เข้ารหัสตามมาตรฐาน ISO 8601
5 สัปดาห์

วันที่ประกอบด้วยตัวเลขปีและสัปดาห์ที่เข้ารหัสตามมาตรฐาน ISO 8601
6 เวลา

เวลา (ชั่วโมงนาทีวินาทีเศษเสี้ยววินาที) เข้ารหัสตามมาตรฐาน ISO 8601
7 จำนวน

ยอมรับเฉพาะค่าตัวเลข แอตทริบิวต์ step ระบุความแม่นยำโดยเริ่มต้นเป็น 1
8 พิสัย

ประเภทช่วงใช้สำหรับช่องป้อนข้อมูลที่ควรมีค่าจากช่วงของตัวเลข
9 อีเมล์

ยอมรับเฉพาะค่าอีเมล ประเภทนี้ใช้สำหรับช่องป้อนข้อมูลที่ควรมีที่อยู่อีเมล หากคุณพยายามส่งข้อความธรรมดาจะบังคับให้ป้อนเฉพาะที่อยู่อีเมลในรูปแบบ [email protected]
10 url

ยอมรับเฉพาะค่า URL ประเภทนี้ใช้สำหรับช่องป้อนข้อมูลที่ควรมีที่อยู่ URL หากคุณพยายามส่งข้อความธรรมดาระบบบังคับให้ป้อนเฉพาะที่อยู่ URL ไม่ว่าจะในรูปแบบ http://www.example.com หรือในรูปแบบ http://example.com

องค์ประกอบ <output>

HTML5 นำเสนอองค์ประกอบใหม่ <output> ซึ่งใช้เพื่อแสดงผลลัพธ์ของเอาต์พุตประเภทต่างๆเช่นเอาต์พุตที่เขียนโดยสคริปต์

คุณสามารถใช้ไฟล์ forแอตทริบิวต์เพื่อระบุความสัมพันธ์ระหว่างองค์ประกอบเอาต์พุตและองค์ประกอบอื่น ๆ ในเอกสารที่มีผลต่อการคำนวณ (เช่นอินพุตหรือพารามิเตอร์) ค่าของแอตทริบิวต์ for คือรายการ ID ที่คั่นด้วยช่องว่างขององค์ประกอบอื่น ๆ

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

แอตทริบิวต์ตัวยึดตำแหน่ง

HTML5 เปิดตัวแอตทริบิวต์ใหม่ที่เรียกว่า placeholder. แอตทริบิวต์นี้ในองค์ประกอบ <input> และ <textarea> ให้คำใบ้แก่ผู้ใช้เกี่ยวกับสิ่งที่สามารถป้อนได้ในฟิลด์ ข้อความตัวยึดจะต้องไม่มีการคืนค่าขนส่งหรือฟีดบรรทัด

นี่คือไวยากรณ์ง่ายๆสำหรับแอตทริบิวต์ตัวยึด -

<input type = "text" name = "search" placeholder = "search the web"/>

แอตทริบิวต์นี้รองรับโดยเบราว์เซอร์ Mozilla, Safari และ Crome เวอร์ชันล่าสุดเท่านั้น

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แอตทริบิวต์โฟกัสอัตโนมัติ

นี่เป็นรูปแบบขั้นตอนเดียวที่เรียบง่ายซึ่งตั้งโปรแกรมใน JavaScript ได้อย่างง่ายดายในขณะโหลดเอกสารโดยจะโฟกัสฟิลด์ฟอร์มหนึ่งช่องโดยอัตโนมัติ

HTML5 เปิดตัวแอตทริบิวต์ใหม่ที่เรียกว่า autofocus ซึ่งจะใช้ดังต่อไปนี้ -

<input type = "text" name = "search" autofocus/>

แอตทริบิวต์นี้รองรับโดยเบราว์เซอร์ Mozilla, Safari และ Chrome เวอร์ชันล่าสุดเท่านั้น

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

แอตทริบิวต์ที่จำเป็น

ตอนนี้คุณไม่จำเป็นต้องมี JavaScript สำหรับการตรวจสอบความถูกต้องฝั่งไคลเอ็นต์เช่นกล่องข้อความว่างจะไม่ถูกส่งเนื่องจาก HTML5 แนะนำแอตทริบิวต์ใหม่ที่เรียกว่า required ซึ่งจะใช้ดังต่อไปนี้และยืนยันว่ามีค่า -

<input type = "text" name = "search" required/>

แอตทริบิวต์นี้รองรับโดยเบราว์เซอร์ Mozilla, Safari และ Chrome เวอร์ชันล่าสุดเท่านั้น

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

SVG ย่อมาจาก Sสามารถทำได้ Vเอคเตอร์ Graphics และเป็นภาษาสำหรับอธิบายกราฟิก 2 มิติและแอพพลิเคชั่นกราฟิกใน XML จากนั้น XML จะถูกแสดงผลโดยโปรแกรมดู SVG

SVG ส่วนใหญ่มีประโยชน์สำหรับไดอะแกรมประเภทเวกเตอร์เช่นแผนภูมิวงกลมกราฟสองมิติในระบบพิกัด X, Y เป็นต้น

SVG กลายเป็นคำแนะนำ W3C 14 มกราคม 2003 และคุณสามารถตรวจสอบเวอร์ชันล่าสุดของข้อกำหนด SVG ที่SVG ข้อมูลจำเพาะ

การดูไฟล์ SVG

เว็บเบราว์เซอร์ส่วนใหญ่สามารถแสดง SVG ได้เช่นเดียวกับที่แสดง PNG, GIF และ JPG ผู้ใช้ Internet Explorer อาจต้องติดตั้งAdobe SVG Viewerเพื่อให้สามารถดู SVG ในเบราว์เซอร์ได้

การฝัง SVG ใน HTML5

HTML5 ช่วยให้การฝัง SVG โดยตรงโดยใช้ <svg>...</svg> แท็กซึ่งมีไวยากรณ์ต่อไปนี้ -

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7 ยังได้แนะนำตัวเลือกการกำหนดค่า ("about: config") ซึ่งคุณสามารถเปิดใช้ HTML5 ได้โดยทำตามขั้นตอนต่อไปนี้ -

  • ประเภท about:config ในแถบที่อยู่ Firefox ของคุณ

  • คลิกปุ่ม "ฉันจะระวังฉันสัญญา!" บนข้อความเตือนที่ปรากฏขึ้น (และตรวจสอบให้แน่ใจว่าคุณปฏิบัติตาม!)

  • ประเภท html5.enable ลงในแถบตัวกรองที่ด้านบนสุดของหน้า

  • ขณะนี้ระบบจะปิดใช้งานดังนั้นให้คลิกเพื่อสลับค่าเป็นจริง

ตอนนี้โปรแกรมแยกวิเคราะห์ Firefox HTML5 ของคุณควรเปิดใช้งานแล้วและคุณจะสามารถทดลองกับตัวอย่างต่อไปนี้ได้

HTML5 - SVG Circle

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดวงกลมโดยใช้แท็ก <circle> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
		
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

HTML5 - SVG สี่เหลี่ยมผืนผ้า

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดสี่เหลี่ยมผืนผ้าโดยใช้แท็ก <rect> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

HTML5 - SVG Line

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะลากเส้นโดยใช้แท็ก <line> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

คุณสามารถใช้ไฟล์ style แอตทริบิวต์ที่ช่วยให้คุณสามารถตั้งค่าข้อมูลลักษณะเพิ่มเติมเช่นเส้นขีดและสีเติมความกว้างของเส้นโครงร่างเป็นต้น

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

HTML5 - SVG วงรี

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดวงรีโดยใช้แท็ก <ellipse> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

HTML5 - SVG รูปหลายเหลี่ยม

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดรูปหลายเหลี่ยมโดยใช้แท็ก <polygon> -

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

HTML5 - SVG Polyline

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดเส้นหลายเส้นโดยใช้แท็ก <polyline> -

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

HTML5 - SVG Gradients

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดวงรีโดยใช้แท็ก <ellipse> และจะใช้แท็ก <radialGradient> เพื่อกำหนดการไล่ระดับแบบรัศมี SVG

ในทำนองเดียวกันคุณสามารถใช้แท็ก <linearGradient> เพื่อสร้างการไล่ระดับสีเชิงเส้น SVG

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

HTML5 - SVG Star

ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดดาวโดยใช้แท็ก <polygon>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5

ไวยากรณ์ HTML ของ HTML5 อนุญาตให้ใช้องค์ประกอบ MathML ภายในเอกสารโดยใช้แท็ก <math> ... </math>

เว็บเบราว์เซอร์ส่วนใหญ่สามารถแสดงแท็ก MathML ได้ หากเบราว์เซอร์ของคุณไม่รองรับ MathML ฉันขอแนะนำให้คุณใช้ Firefox เวอร์ชันล่าสุด

ตัวอย่าง MathML

ต่อไปนี้เป็นเอกสาร HTML5 ที่ถูกต้องพร้อม MathML -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo> = </mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การใช้อักขระ MathML

พิจารณาต่อไปนี้เป็นมาร์กอัปที่ใช้ประโยชน์จากอักขระ & InvisibleTimes; -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>			
            <mrow>
				
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
					
               <mo>+</mo>
					
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ หากคุณไม่สามารถเห็นผลลัพธ์ที่เหมาะสมเช่น x 2 + 4x + 4 = 0 ให้ใช้ Firefox 3.5 หรือเวอร์ชันที่สูงกว่า

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างการนำเสนอเมทริกซ์

พิจารณาตัวอย่างต่อไปนี้ซึ่งจะใช้เพื่อแสดงเมทริกซ์ 2x2 อย่างง่าย -

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open = "[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>

   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ หากคุณไม่สามารถเห็นผลลัพธ์ที่เหมาะสมให้ใช้ Firefox 3.5 หรือเวอร์ชันที่สูงกว่า

HTML5 แนะนำกลไกสองอย่างซึ่งคล้ายกับคุกกี้เซสชัน HTTP สำหรับการจัดเก็บข้อมูลที่มีโครงสร้างบนฝั่งไคลเอ็นต์และเพื่อเอาชนะข้อเสียที่ตามมา

  • คุกกี้จะรวมอยู่ในทุกคำขอ HTTP ดังนั้นจึงทำให้เว็บแอปพลิเคชันของคุณช้าลงโดยการส่งข้อมูลเดียวกัน

  • คุกกี้จะรวมอยู่ในทุกคำขอ HTTP ดังนั้นจึงส่งข้อมูลที่ไม่เข้ารหัสผ่านอินเทอร์เน็ต

  • คุกกี้ถูก จำกัด ไว้ที่ข้อมูลประมาณ 4 KB ไม่เพียงพอที่จะจัดเก็บข้อมูลที่จำเป็น

การจัดเก็บทั้งสองคือ session storage และ local storage และจะใช้เพื่อจัดการกับสถานการณ์ต่างๆ

เวอร์ชันล่าสุดของเบราว์เซอร์ทุกตัวรองรับ HTML5 Storage รวมถึง Internet Explorer

พื้นที่จัดเก็บเซสชัน

พื้นที่จัดเก็บเซสชันถูกออกแบบมาสำหรับสถานการณ์ที่ผู้ใช้จะได้ดำเนินการทำรายการเดียว แต่อาจจะมีการดำเนินธุรกรรมหลายในหน้าต่างที่แตกต่างกันในเวลาเดียวกัน

ตัวอย่าง

ตัวอย่างเช่นหากผู้ใช้ซื้อตั๋วเครื่องบินในสองหน้าต่างที่แตกต่างกันโดยใช้ไซต์เดียวกัน หากไซต์ใช้คุกกี้เพื่อติดตามว่าผู้ใช้ซื้อตั๋วใดจากนั้นเมื่อผู้ใช้คลิกจากหน้าหนึ่งไปอีกหน้าหนึ่งในทั้งสองหน้าต่างตั๋วที่ซื้อในปัจจุบันจะ "รั่วไหล" จากหน้าต่างหนึ่งไปยังอีกหน้าต่างหนึ่งซึ่งอาจทำให้ผู้ใช้ ซื้อตั๋วสองใบสำหรับเที่ยวบินเดียวกันโดยไม่ต้องสังเกตจริงๆ

HTML5 แนะนำแอ็ตทริบิวต์sessionStorageซึ่งไซต์จะใช้เพื่อเพิ่มข้อมูลลงในที่เก็บข้อมูลเซสชันและจะสามารถเข้าถึงหน้าใดก็ได้จากไซต์เดียวกันที่เปิดในหน้าต่างนั้นกล่าวคือsession และทันทีที่คุณปิดหน้าต่างเซสชันนั้นจะหายไป

ต่อไปนี้เป็นรหัสที่จะตั้งค่าตัวแปรเซสชันและเข้าถึงตัวแปรนั้น -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ที่เก็บข้อมูลในเครื่อง

เก็บข้อมูลท้องถิ่นถูกออกแบบมาสำหรับการจัดเก็บข้อมูลที่ครอบคลุมหลายหน้าต่างและเวลาเกินเซสชันปัจจุบัน โดยเฉพาะอย่างยิ่งเว็บแอปพลิเคชันอาจต้องการจัดเก็บข้อมูลผู้ใช้เป็นเมกะไบต์เช่นเอกสารที่ผู้ใช้สร้างขึ้นทั้งหมดหรือกล่องจดหมายของผู้ใช้ในฝั่งไคลเอ็นต์ด้วยเหตุผลด้านประสิทธิภาพ

อีกครั้งคุกกี้ไม่สามารถจัดการกับกรณีนี้ได้ดีเนื่องจากมีการส่งคำขอทุกครั้ง

ตัวอย่าง

HTML5 แนะนำแอตทริบิวต์localStorageซึ่งจะใช้ในการเข้าถึงพื้นที่จัดเก็บข้อมูลภายในของเพจโดยไม่ จำกัด เวลาและพื้นที่จัดเก็บในตัวเครื่องนี้จะพร้อมใช้งานเมื่อใดก็ตามที่คุณใช้เพจ

ต่อไปนี้เป็นรหัสที่จะตั้งค่าตัวแปรที่จัดเก็บในเครื่องและเข้าถึงตัวแปรนั้นทุกครั้งที่เข้าถึงหน้านี้แม้ในครั้งต่อไปเมื่อคุณเปิดหน้าต่าง

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ลบที่เก็บข้อมูลบนเว็บ

การจัดเก็บข้อมูลที่ละเอียดอ่อนบนเครื่องภายในอาจเป็นอันตรายและอาจทำให้เกิดช่องโหว่ด้านความปลอดภัย

เซสชันการจัดเก็บข้อมูลจะถูกลบออกจากเบราว์เซอร์ได้ทันทีหลังจากที่เซสชั่นได้รับการยกเลิก

หากต้องการล้างการตั้งค่าการจัดเก็บในเครื่องคุณจะต้องโทร localStorage.remove('key'); โดยที่ 'คีย์' คือคีย์ของค่าที่คุณต้องการลบ หากต้องการล้างการตั้งค่าทั้งหมดคุณต้องโทรlocalStorage.clear() วิธี.

ต่อไปนี้เป็นรหัสที่จะล้างการจัดเก็บในตัวเครื่องที่สมบูรณ์ -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

Web SQL Database API ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML5 แต่เป็นข้อกำหนดแยกต่างหากซึ่งแนะนำชุดของ API เพื่อจัดการฐานข้อมูลฝั่งไคลเอ็นต์โดยใช้ SQL

ฉันสมมติว่าคุณเป็นนักพัฒนาเว็บที่ยอดเยี่ยมและหากเป็นเช่นนั้นก็ไม่ต้องสงสัยเลยว่าคุณคงตระหนักดีถึงแนวคิดของ SQL และ RDBMS หากคุณยังคงต้องการที่จะมีเซสชั่นกับ SQL แล้วคุณสามารถผ่านไปเราสอน SQL

ฐานข้อมูล Web SQL จะทำงานใน Safari, Chrome และ Opera เวอร์ชันล่าสุด

วิธีการหลัก

มีสามวิธีหลักต่อไปนี้ที่กำหนดไว้ในข้อมูลจำเพาะที่ฉันจะกล่าวถึงในบทช่วยสอนนี้ -

  • openDatabase - วิธีนี้จะสร้างวัตถุฐานข้อมูลโดยใช้ฐานข้อมูลที่มีอยู่หรือสร้างใหม่

  • transaction - วิธีนี้ช่วยให้เราสามารถควบคุมธุรกรรมและดำเนินการคอมมิตหรือย้อนกลับตามสถานการณ์

  • executeSql - วิธีนี้ใช้เพื่อดำเนินการสืบค้น SQL จริง

กำลังเปิดฐานข้อมูล

opendatabaseวิธีการดูแลของการเปิดฐานข้อมูลถ้ามีอยู่แล้ววิธีนี้จะสร้างมันถ้ามันแล้วไม่ได้อยู่

ในการสร้างและเปิดฐานข้อมูลให้ใช้รหัสต่อไปนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

วิธีการข้างต้นใช้พารามิเตอร์ห้าตัวต่อไปนี้ -

  • ชื่อฐานข้อมูล
  • หมายเลขเวอร์ชัน
  • คำอธิบายข้อความ
  • ขนาดของฐานข้อมูล
  • การสร้างการโทรกลับ

อาร์กิวเมนต์สุดท้ายและที่ 5 การเรียกกลับการสร้างจะถูกเรียกหากกำลังสร้างฐานข้อมูล อย่างไรก็ตามหากไม่มีคุณสมบัตินี้ฐานข้อมูลยังคงถูกสร้างขึ้นทันทีและมีเวอร์ชันที่ถูกต้อง

การดำเนินการสืบค้น

ในการดำเนินการสืบค้นคุณใช้ฟังก์ชัน database.transaction () ฟังก์ชันนี้ต้องการอาร์กิวเมนต์เดียวซึ่งเป็นฟังก์ชันที่ดูแลการดำเนินการสืบค้นดังต่อไปนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

แบบสอบถามด้านบนจะสร้างตารางที่เรียกว่า LOGS ในฐานข้อมูล 'mydb'

การทำงานของ INSERT

ในการสร้างเอนเทอร์รี่ลงในตารางเราจะเพิ่มคิวรี SQL อย่างง่ายในตัวอย่างด้านบนดังนี้

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

เราสามารถส่งผ่านค่าไดนามิกในขณะที่สร้างการป้อนได้ดังนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

ที่นี่ e_id และ e_log เป็นตัวแปรภายนอกและ executeSql จะแมปแต่ละรายการในอาร์กิวเมนต์อาร์เรย์กับ "?" s

อ่านการทำงาน

ในการอ่านบันทึกที่มีอยู่แล้วเราใช้การโทรกลับเพื่อบันทึกผลลัพธ์ดังนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

ตัวอย่างสุดท้าย

สุดท้ายให้เราเก็บตัวอย่างนี้ไว้ในเอกสาร HTML5 ที่สมบูรณ์ดังต่อไปนี้และลองเรียกใช้ด้วยเบราว์เซอร์ Safari

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เว็บแอปพลิเคชันทั่วไปจะสร้างเหตุการณ์ที่ส่งไปยังเว็บเซิร์ฟเวอร์ ตัวอย่างเช่นการคลิกลิงก์แบบธรรมดาจะขอเพจใหม่จากเซิร์ฟเวอร์

ประเภทของเหตุการณ์ที่ไหลจากเว็บเบราว์เซอร์ไปยังเว็บเซิร์ฟเวอร์อาจเรียกว่าเหตุการณ์ที่ไคลเอ็นต์ส่ง

นอกเหนือจาก HTML5 แล้วWHATWG Web Applications 1.0 จะแนะนำเหตุการณ์ที่ไหลจากเว็บเซิร์ฟเวอร์ไปยังเว็บเบราว์เซอร์และเรียกว่าเหตุการณ์ที่ส่งผ่านเซิร์ฟเวอร์ (SSE) การใช้ SSE คุณสามารถพุชเหตุการณ์ DOM จากเว็บเซิร์ฟเวอร์ของคุณไปยังเบราว์เซอร์ของผู้เยี่ยมชมได้อย่างต่อเนื่อง

วิธีการสตรีมเหตุการณ์จะเปิดการเชื่อมต่อแบบต่อเนื่องไปยังเซิร์ฟเวอร์ส่งข้อมูลไปยังไคลเอนต์เมื่อมีข้อมูลใหม่ทำให้ไม่จำเป็นต้องทำการสำรวจอย่างต่อเนื่อง

เหตุการณ์ที่เซิร์ฟเวอร์ส่งเป็นมาตรฐานในการสตรีมข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์

Web Application สำหรับ SSE

ในการใช้ Server-Sent Events ในเว็บแอปพลิเคชันคุณจะต้องเพิ่มองค์ประกอบ <eventsource> ลงในเอกสาร

src แอตทริบิวต์ขององค์ประกอบ <eventsource> ควรชี้ไปที่ URL ซึ่งควรมีการเชื่อมต่อ HTTP แบบต่อเนื่องที่ส่งสตรีมข้อมูลที่มีเหตุการณ์

URL จะชี้ไปที่ PHP, PERL หรือสคริปต์ Python ใด ๆ ซึ่งจะดูแลการส่งข้อมูลเหตุการณ์อย่างสม่ำเสมอ ต่อไปนี้เป็นตัวอย่างง่ายๆของเว็บแอปพลิเคชันที่คาดว่าจะมีเวลาเซิร์ฟเวอร์

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

สคริปต์ฝั่งเซิร์ฟเวอร์สำหรับ SSE

สคริปต์ฝั่งเซิร์ฟเวอร์ควรส่ง Content-typeส่วนหัวระบุชนิดtext / event-streamดังนี้

print "Content-Type: text/event-stream\n\n";

หลังจากตั้งค่า Content-Type สคริปต์ฝั่งเซิร์ฟเวอร์จะส่งไฟล์ Event: tag ตามด้วยชื่อเหตุการณ์ ตัวอย่างต่อไปนี้จะส่ง Server-Time เป็นชื่อเหตุการณ์ที่สิ้นสุดด้วยอักขระบรรทัดใหม่

print "Event: server-time\n";

ขั้นตอนสุดท้ายคือการส่งข้อมูลเหตุการณ์โดยใช้ Data: แท็กซึ่งจะตามด้วยจำนวนเต็มของค่าสตริงที่สิ้นสุดด้วยอักขระบรรทัดใหม่ดังนี้ -

$time = localtime();
print "Data: $time\n";

สุดท้ายต่อไปนี้คือ ticker.cgi ที่เขียนใน Perl -

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

จัดการเหตุการณ์ที่เซิร์ฟเวอร์ส่ง

ให้เราแก้ไขเว็บแอปพลิเคชันของเราเพื่อจัดการกับเหตุการณ์ที่เซิร์ฟเวอร์ส่ง ต่อไปนี้เป็นตัวอย่างสุดท้าย

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>

ก่อนทดสอบเหตุการณ์ที่เซิร์ฟเวอร์ส่งฉันขอแนะนำให้คุณตรวจสอบให้แน่ใจว่าเว็บเบราว์เซอร์ของคุณรองรับแนวคิดนี้

WebSockets เป็นเทคโนโลยีการสื่อสารแบบสองทิศทางรุ่นใหม่สำหรับเว็บแอปพลิเคชันซึ่งทำงานผ่านซ็อกเก็ตเดียวและเปิดเผยผ่านอินเทอร์เฟซ JavaScript ในเบราว์เซอร์ที่รองรับ HTML 5

เมื่อคุณได้รับการเชื่อมต่อ Web Socket กับเว็บเซิร์ฟเวอร์คุณสามารถส่งข้อมูลจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์โดยเรียกไฟล์ send() วิธีการและรับข้อมูลจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์โดยไฟล์ onmessage จัดการเหตุการณ์.

ต่อไปนี้เป็น API ที่สร้างวัตถุ WebSocket ใหม่

var Socket = new WebSocket(url, [protocal] );

นี่คืออาร์กิวเมนต์แรก url ระบุ URL ที่จะเชื่อมต่อ แอตทริบิวต์ที่สองโปรโตคอลเป็นทางเลือกและหากมีระบุโปรโตคอลย่อยที่เซิร์ฟเวอร์ต้องสนับสนุนเพื่อให้การเชื่อมต่อสำเร็จ

คุณสมบัติ WebSocket

ต่อไปนี้เป็นแอตทริบิวต์ของวัตถุ WebSocket สมมติว่าเราสร้างวัตถุ Socket ตามที่กล่าวไว้ข้างต้น -

ซีเนียร์ คุณสมบัติและคำอธิบาย
1

Socket.readyState

แอตทริบิวต์ readyState แบบอ่านอย่างเดียวแสดงถึงสถานะของการเชื่อมต่อ สามารถมีค่าดังต่อไปนี้ -

  • ค่า 0 แสดงว่ายังไม่ได้สร้างการเชื่อมต่อ

  • ค่า 1 แสดงว่าการเชื่อมต่อถูกสร้างขึ้นและสามารถสื่อสารได้

  • ค่า 2 แสดงว่าการเชื่อมต่อกำลังดำเนินการปิดการจับมือกัน

  • ค่า 3 แสดงว่าการเชื่อมต่อถูกปิดหรือไม่สามารถเปิดได้
2

Socket.bufferedAmount

แอตทริบิวต์แบบอ่านอย่างเดียว bufferedAmount แสดงจำนวนไบต์ของข้อความ UTF-8 ที่ได้รับการจัดคิวโดยใช้เมธอด send ()

เหตุการณ์ WebSocket

ต่อไปนี้เป็นเหตุการณ์ที่เกี่ยวข้องกับวัตถุ WebSocket สมมติว่าเราสร้างวัตถุ Socket ตามที่กล่าวไว้ข้างต้น -

เหตุการณ์ จัดการเหตุการณ์ คำอธิบาย
เปิด Socket.onopen เหตุการณ์นี้เกิดขึ้นเมื่อสร้างการเชื่อมต่อซ็อกเก็ต
ข้อความ Socket.onmessage เหตุการณ์นี้เกิดขึ้นเมื่อไคลเอนต์ได้รับข้อมูลจากเซิร์ฟเวอร์
ข้อผิดพลาด Socket.onerror เหตุการณ์นี้เกิดขึ้นเมื่อมีข้อผิดพลาดในการสื่อสาร
ปิด Socket.onclose เหตุการณ์นี้เกิดขึ้นเมื่อปิดการเชื่อมต่อ

วิธี WebSocket

ต่อไปนี้เป็นวิธีการที่เกี่ยวข้องกับวัตถุ WebSocket สมมติว่าเราสร้างวัตถุ Socket ตามที่กล่าวไว้ข้างต้น -

ซีเนียร์ วิธีการและคำอธิบาย
1

Socket.send()

วิธีการส่ง (ข้อมูล) ส่งข้อมูลโดยใช้การเชื่อมต่อ
2

Socket.close()

จะใช้เมธอด close () เพื่อยุติการเชื่อมต่อที่มีอยู่

ตัวอย่าง WebSocket

WebSocket คือซ็อกเก็ต TCP แบบสองทิศทางมาตรฐานระหว่างไคลเอนต์และเซิร์ฟเวอร์ ซ็อกเก็ตเริ่มต้นจากการเชื่อมต่อ HTTP จากนั้น "อัปเกรด" เป็นซ็อกเก็ต TCP หลังจากการจับมือ HTTP หลังจากการจับมือแล้วฝ่ายใดฝ่ายหนึ่งสามารถส่งข้อมูลได้

HTML ฝั่งไคลเอ็นต์และโค้ด JavaScript

ในขณะที่เขียนบทช่วยสอนนี้มีเว็บเบราว์เซอร์เพียงไม่กี่เว็บที่รองรับอินเทอร์เฟซ WebSocket () คุณสามารถลองตัวอย่างต่อไปนี้กับ Chrome, Mozilla, Opera และ Safari เวอร์ชันล่าสุด

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

ติดตั้ง pywebsocket

ก่อนที่คุณจะทดสอบโปรแกรมไคลเอนต์ข้างต้นคุณต้องมีเซิร์ฟเวอร์ที่รองรับ WebSocket ดาวน์โหลด mod_pywebsocket-xxxtar.gz จากpywebsocketซึ่งมีจุดมุ่งหมายเพื่อให้ส่วนขยาย Web Socket สำหรับ Apache HTTP Server และติดตั้งตามขั้นตอนเหล่านี้

  • คลายซิปและคลายไฟล์ที่ดาวน์โหลด

  • เข้าไปข้างใน pywebsocket-x.x.x/src/ ไดเรกทอรี

  • $ python setup.py build

  • $ sudo python setup.py ติดตั้ง

  • จากนั้นอ่านเอกสารโดย -

    • $ pydoc mod_pywebsocket

สิ่งนี้จะติดตั้งลงในสภาพแวดล้อม python ของคุณ

เริ่มเซิร์ฟเวอร์

ไปที่ไฟล์ pywebsocket-x.x.x/src/mod_pywebsocket โฟลเดอร์และเรียกใช้คำสั่งต่อไปนี้ -

$sudo python standalone.py -p 9998 -w ../example/

สิ่งนี้จะเริ่มการฟังเซิร์ฟเวอร์ที่พอร์ต 9998 และใช้ไฟล์ handlers ไดเร็กทอรีที่ระบุโดยอ็อพชัน -w ที่ echo_wsh.py ของเราอยู่

ขณะนี้ใช้เบราว์เซอร์ Chrome ให้เปิดไฟล์ html ที่คุณสร้างขึ้นในตอนแรก หากเบราว์เซอร์ของคุณรองรับ WebSocket () คุณจะได้รับการแจ้งเตือนว่าเบราว์เซอร์ของคุณรองรับ WebSocket และสุดท้ายเมื่อคุณคลิกที่ "เรียกใช้ WebSocket" คุณจะได้รับข้อความ Goodbye ที่ส่งโดยสคริปต์เซิร์ฟเวอร์

องค์ประกอบ HTML5 <canvas> ช่วยให้คุณวาดภาพกราฟิกโดยใช้ JavaScript ได้ง่ายและมีประสิทธิภาพ สามารถใช้ในการวาดกราฟสร้างองค์ประกอบภาพหรือทำแอนิเมชั่นแบบธรรมดา (และไม่ธรรมดา)

นี่คือองค์ประกอบ <canvas> ธรรมดาซึ่งมีคุณลักษณะเฉพาะสองอย่างเท่านั้น width และ height บวกแอตทริบิวต์ HTML5 หลักทั้งหมดเช่น id ชื่อและคลาส ฯลฯ

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

คุณสามารถค้นหาองค์ประกอบ <canvas> ใน DOM โดยใช้เมธอดgetElementById ()ดังต่อไปนี้ -

var canvas = document.getElementById("mycanvas");

ให้เราดูตัวอย่างง่ายๆในการใช้องค์ประกอบ <canvas> ในเอกสาร HTML5

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

บริบทการแสดงผล

ในตอนแรก <canvas> ว่างเปล่าและในการแสดงบางสิ่งสคริปต์จะต้องเข้าถึงบริบทการแสดงผลก่อนและดึงมาใช้

องค์ประกอบผ้าใบมีวิธี DOM ที่เรียกว่า getContextใช้เพื่อรับบริบทการแสดงผลและฟังก์ชันการวาดภาพ ฟังก์ชันนี้รับพารามิเตอร์หนึ่งตัวคือประเภทของบริบท2d.

ต่อไปนี้เป็นรหัสเพื่อรับบริบทที่ต้องการพร้อมกับการตรวจสอบว่าเบราว์เซอร์ของคุณรองรับองค์ประกอบ <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

รองรับเบราว์เซอร์

Firefox, Safari, Chrome และ Opera เวอร์ชันล่าสุดรองรับ HTML5 Canvas ทั้งหมด แต่ IE8 ไม่รองรับ Canvas โดยกำเนิด

คุณสามารถใช้ExplorerCanvasเพื่อรองรับ Canvas ผ่าน Internet Explorer คุณต้องรวม JavaScript นี้ไว้ดังนี้ -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

ตัวอย่างผ้าใบ HTML5

บทช่วยสอนนี้ครอบคลุมตัวอย่างต่อไปนี้ที่เกี่ยวข้องกับองค์ประกอบ HTML5 <canvas>

ซีเนียร์ ตัวอย่างและคำอธิบาย
1 การวาดรูปสี่เหลี่ยม

เรียนรู้วิธีการวาดสี่เหลี่ยมผืนผ้าโดยใช้ HTML5 <canvas> องค์ประกอบ
2 การวาดเส้นทาง

เรียนรู้วิธีสร้างรูปร่างโดยใช้เส้นทางใน HTML5 <canvas> องค์ประกอบ

3 การวาดเส้น

เรียนรู้วิธีการวาดเส้นโดยใช้ HTML5 <canvas> element
4 การวาด Bezier

เรียนรู้วิธีการวาดเส้นโค้ง Bezier โดยใช้ HTML5 <canvas> องค์ประกอบ
5 การวาดกำลังสอง

เรียนรู้วิธีการวาดเส้นโค้งกำลังสองโดยใช้ HTML5 <canvas> องค์ประกอบ
6 การใช้รูปภาพ

เรียนรู้วิธีใช้รูปภาพที่มีองค์ประกอบ <canvas> HTML5
7 สร้างการไล่ระดับสี

เรียนรู้วิธีสร้างการไล่ระดับสีโดยใช้ HTML5 <canvas> องค์ประกอบ
8 รูปแบบและสี

เรียนรู้วิธีปรับใช้สไตล์และสีโดยใช้ HTML5 <canvas> องค์ประกอบ
9 ข้อความและแบบอักษร

เรียนรู้วิธีวาดข้อความที่น่าทึ่งโดยใช้แบบอักษรและขนาดที่แตกต่างกัน
10 รูปแบบและเงา

เรียนรู้วิธีวาดรูปแบบต่างๆและวางเงา
11 สถานะผ้าใบ

เรียนรู้วิธีบันทึกและกู้คืนสถานะผ้าใบในขณะที่วาดภาพที่ซับซ้อนบนผืนผ้าใบ
12 การแปลผ้าใบ

วิธีนี้ใช้เพื่อย้ายผืนผ้าใบและจุดเริ่มต้นไปยังจุดอื่นในเส้นตาราง
13 การหมุนผ้าใบ

วิธีนี้ใช้เพื่อหมุนผืนผ้าใบไปรอบ ๆ จุดกำเนิดปัจจุบัน
14 การปรับขนาดผ้าใบ

วิธีนี้ใช้เพื่อเพิ่มหรือลดหน่วยในกริดผ้าใบ
15 การแปลงผ้าใบ

วิธีการเหล่านี้อนุญาตให้แก้ไขโดยตรงกับเมทริกซ์การเปลี่ยนแปลง
16 องค์ประกอบผ้าใบ

วิธีนี้ใช้เพื่อปกปิดบางพื้นที่หรือล้างบางส่วนออกจากผืนผ้าใบ
17 ภาพเคลื่อนไหวผ้าใบ

เรียนรู้วิธีสร้างแอนิเมชันพื้นฐานโดยใช้ผ้าใบ HTML5 และ JavaScript

คุณลักษณะ HTML5 รวมถึงการสนับสนุนเสียงและวิดีโอแบบเนทีฟโดยไม่ต้องใช้ Flash

แท็ก HTML5 <audio> และ <video> ทำให้การเพิ่มสื่อลงในเว็บไซต์เป็นเรื่องง่าย คุณต้องตั้งค่าsrc แอตทริบิวต์เพื่อระบุแหล่งที่มาของสื่อและรวมแอตทริบิวต์การควบคุมเพื่อให้ผู้ใช้สามารถเล่นและหยุดสื่อชั่วคราวได้

การฝังวิดีโอ

นี่คือรูปแบบที่ง่ายที่สุดในการฝังไฟล์วิดีโอในหน้าเว็บของคุณ -

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

ข้อกำหนดร่าง HTML5 ปัจจุบันไม่ได้ระบุว่าเบราว์เซอร์รูปแบบวิดีโอใดที่ควรรองรับในแท็กวิดีโอ แต่รูปแบบวิดีโอที่ใช้กันมากที่สุด ได้แก่ -

  • Ogg - ไฟล์ Ogg พร้อมตัวแปลงสัญญาณวิดีโอ Thedora และตัวแปลงสัญญาณเสียง Vorbis

  • mpeg4 - ไฟล์ MPEG4 พร้อมตัวแปลงสัญญาณวิดีโอ H.264 และตัวแปลงสัญญาณเสียง AAC

คุณสามารถใช้แท็ก <source> เพื่อระบุสื่อพร้อมกับประเภทสื่อและแอตทริบิวต์อื่น ๆ อีกมากมาย องค์ประกอบวิดีโอช่วยให้องค์ประกอบแหล่งที่มาหลายรายการและเบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก -

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ข้อกำหนดคุณสมบัติวิดีโอ

แท็กวิดีโอ HTML5 สามารถมีแอตทริบิวต์จำนวนมากเพื่อควบคุมรูปลักษณ์และฟังก์ชันต่างๆของการควบคุม -

ซีเนียร์ คุณสมบัติและคำอธิบาย
1

autoplay

แอตทริบิวต์บูลีนนี้หากระบุไว้วิดีโอจะเริ่มเล่นโดยอัตโนมัติทันทีที่ทำได้โดยไม่ต้องหยุดเพื่อโหลดข้อมูลให้เสร็จสิ้น
2

autobuffer

แอตทริบิวต์บูลีนนี้หากระบุไว้วิดีโอจะเริ่มบัฟเฟอร์โดยอัตโนมัติแม้ว่าจะไม่ได้ตั้งค่าให้เล่นโดยอัตโนมัติก็ตาม
3

controls

หากมีแอตทริบิวต์นี้จะอนุญาตให้ผู้ใช้ควบคุมการเล่นวิดีโอรวมถึงระดับเสียงการค้นหาและหยุดเล่นชั่วคราว / เล่นต่อ
4

height

แอตทริบิวต์นี้ระบุความสูงของพื้นที่แสดงผลของวิดีโอเป็นพิกเซล CSS
5

loop

แอตทริบิวต์บูลีนนี้หากระบุไว้จะอนุญาตให้วิดีโอย้อนกลับไปที่จุดเริ่มต้นโดยอัตโนมัติหลังจากถึงจุดสิ้นสุด
6

preload

แอตทริบิวต์นี้ระบุว่าวิดีโอจะโหลดเมื่อโหลดหน้าเว็บและพร้อมที่จะทำงาน ละเว้นหากมีการเล่นอัตโนมัติ
7

poster

นี่คือ URL ของรูปภาพที่จะแสดงจนกว่าผู้ใช้จะเล่นหรือค้นหา
8

src

URL ของวิดีโอที่จะฝัง นี่เป็นทางเลือก; คุณอาจใช้องค์ประกอบ <source> ภายในบล็อกวิดีโอแทนเพื่อระบุวิดีโอที่จะฝัง
9

width

แอตทริบิวต์นี้ระบุความกว้างของพื้นที่แสดงผลของวิดีโอเป็นพิกเซล CSS

การฝังเสียง

HTML5 รองรับแท็ก <audio> ซึ่งใช้เพื่อฝังเนื้อหาเสียงในเอกสาร HTML หรือ XHTML ดังต่อไปนี้

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

ข้อกำหนดร่าง HTML5 ปัจจุบันไม่ได้ระบุว่าเบราว์เซอร์รูปแบบเสียงใดที่ควรรองรับในแท็กเสียง แต่รูปแบบเสียงที่ใช้กันมากที่สุดคือogg, mp3 และ wav.

คุณสามารถใช้ <source & ggt; แท็กเพื่อระบุสื่อพร้อมกับประเภทสื่อและคุณลักษณะอื่น ๆ อีกมากมาย องค์ประกอบเสียงช่วยให้องค์ประกอบแหล่งที่มาหลายรายการและเบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก -

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ข้อกำหนดคุณสมบัติเสียง

แท็กเสียง HTML5 สามารถมีคุณลักษณะหลายอย่างเพื่อควบคุมรูปลักษณ์และฟังก์ชันต่างๆของการควบคุม -

ซีเนียร์ คุณสมบัติและคำอธิบาย
1

autoplay

แอตทริบิวต์บูลีนนี้หากระบุไว้เสียงจะเริ่มเล่นโดยอัตโนมัติทันทีที่สามารถทำได้โดยไม่ต้องหยุดเพื่อโหลดข้อมูลให้เสร็จสิ้น
2

autobuffer

แอตทริบิวต์บูลีนนี้หากระบุไว้เสียงจะเริ่มบัฟเฟอร์โดยอัตโนมัติแม้ว่าจะไม่ได้ตั้งค่าให้เล่นโดยอัตโนมัติก็ตาม
3

controls

หากมีแอตทริบิวต์นี้จะอนุญาตให้ผู้ใช้ควบคุมการเล่นเสียงรวมถึงระดับเสียงการค้นหาและหยุดเล่นชั่วคราว / เล่นต่อ
4

loop

แอตทริบิวต์บูลีนนี้หากระบุไว้จะอนุญาตให้เสียงย้อนกลับไปที่จุดเริ่มต้นโดยอัตโนมัติหลังจากถึงจุดสิ้นสุด
5

preload

แอตทริบิวต์นี้ระบุว่าเสียงจะถูกโหลดเมื่อโหลดหน้าเว็บและพร้อมที่จะเรียกใช้ ละเว้นหากมีการเล่นอัตโนมัติ
6

src

URL ของเสียงที่จะฝัง นี่เป็นทางเลือก; คุณอาจใช้องค์ประกอบ <source> ภายในบล็อกวิดีโอแทนเพื่อระบุวิดีโอที่จะฝัง

การจัดการกิจกรรมสื่อ

แท็กเสียงและวิดีโอ HTML5 สามารถมีแอตทริบิวต์จำนวนมากเพื่อควบคุมฟังก์ชันต่างๆของการควบคุมโดยใช้ JavaScript -

ส. เหตุการณ์และคำอธิบาย
1

abort

เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการเล่นถูกยกเลิก
2

canplay

เหตุการณ์นี้สร้างขึ้นเมื่อมีข้อมูลเพียงพอที่จะเล่นสื่อได้
3

ended

เหตุการณ์นี้สร้างขึ้นเมื่อการเล่นเสร็จสิ้น
4

error

เหตุการณ์นี้ถูกสร้างขึ้นเมื่อเกิดข้อผิดพลาด
5

loadeddata

เหตุการณ์นี้สร้างขึ้นเมื่อเฟรมแรกของสื่อโหลดเสร็จสิ้น
6

loadstart

เหตุการณ์นี้สร้างขึ้นเมื่อการโหลดสื่อเริ่มต้นขึ้น
7

pause

เหตุการณ์นี้สร้างขึ้นเมื่อหยุดเล่นชั่วคราว
8

play

เหตุการณ์นี้สร้างขึ้นเมื่อการเล่นเริ่มต้นหรือเล่นต่อ
9

progress

เหตุการณ์นี้ถูกสร้างขึ้นเป็นระยะเพื่อแจ้งความคืบหน้าของการดาวน์โหลดสื่อ
10

ratechange

เหตุการณ์นี้สร้างขึ้นเมื่อความเร็วในการเล่นเปลี่ยนไป
11

seeked

เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการดำเนินการค้นหาเสร็จสิ้น
12

seeking

เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการดำเนินการค้นหาเริ่มต้นขึ้น
13

suspend

เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการโหลดสื่อถูกระงับ
14

volumechange

เหตุการณ์นี้ถูกสร้างขึ้นเมื่อระดับเสียงเปลี่ยนไป
15

waiting

เหตุการณ์นี้ถูกสร้างขึ้นเมื่อการดำเนินการที่ร้องขอ (เช่นการเล่น) ล่าช้าเนื่องจากการดำเนินการอื่นเสร็จสิ้น (เช่นการค้นหา)

ต่อไปนี้เป็นตัวอย่างที่อนุญาตให้เล่นวิดีโอที่กำหนด -

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดค่าเซิร์ฟเวอร์สำหรับประเภทสื่อ

โดยค่าเริ่มต้นเซิร์ฟเวอร์ส่วนใหญ่จะไม่ให้บริการสื่อ Ogg หรือ mp4 ด้วยประเภท MIME ที่ถูกต้องดังนั้นคุณอาจต้องเพิ่มการกำหนดค่าที่เหมาะสมสำหรับสิ่งนี้

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

HTML5 Geolocation API ช่วยให้คุณสามารถแบ่งปันตำแหน่งของคุณกับเว็บไซต์โปรดของคุณ JavaScript สามารถจับละติจูดและลองจิจูดของคุณและสามารถส่งไปยังเว็บเซิร์ฟเวอร์แบ็กเอนด์และทำสิ่งต่างๆเช่นการค้นหาธุรกิจในท้องถิ่นหรือแสดงตำแหน่งของคุณบนแผนที่

ปัจจุบันเบราว์เซอร์และโทรศัพท์มือถือส่วนใหญ่รองรับ Geolocation API geolocation API ทำงานกับคุณสมบัติใหม่ของ global navigator object คือ Geolocation object ซึ่งสามารถสร้างได้ดังนี้ -

var geolocation = navigator.geolocation;

วัตถุตำแหน่งทางภูมิศาสตร์เป็นวัตถุบริการที่อนุญาตให้วิดเจ็ตดึงข้อมูลเกี่ยวกับตำแหน่งทางภูมิศาสตร์ของอุปกรณ์

วิธีการระบุตำแหน่งทางภูมิศาสตร์

วัตถุตำแหน่งทางภูมิศาสตร์มีวิธีการดังต่อไปนี้ -

ซีเนียร์ วิธีการและคำอธิบาย
1 getCurrentPosition ()

วิธีนี้จะดึงตำแหน่งทางภูมิศาสตร์ปัจจุบันของผู้ใช้
2 watchPosition ()

วิธีนี้จะดึงข้อมูลอัปเดตเป็นระยะ ๆ เกี่ยวกับตำแหน่งทางภูมิศาสตร์ปัจจุบันของอุปกรณ์
3 clearWatch ()

วิธีนี้จะยกเลิกการโทร watchPosition ที่กำลังดำเนินอยู่

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างเพื่อใช้วิธีการใด ๆ ข้างต้น -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

ที่นี่ showLocation และ errorHandler เป็นวิธีการโทรกลับซึ่งจะใช้เพื่อรับตำแหน่งจริงตามที่อธิบายไว้ในส่วนถัดไปและเพื่อจัดการข้อผิดพลาดหากมี

คุณสมบัติที่ตั้ง

วิธีการระบุตำแหน่งทางภูมิศาสตร์ getCurrentPosition () และ getPositionUsingMethodName () ระบุวิธีการเรียกกลับที่ดึงข้อมูลตำแหน่ง วิธีการเหล่านี้เรียกว่าอะซิงโครนัสกับวัตถุPosition ซึ่งเก็บข้อมูลตำแหน่งที่สมบูรณ์

Positionวัตถุระบุตำแหน่งทางภูมิศาสตร์ปัจจุบันของอุปกรณ์ ตำแหน่งจะแสดงเป็นชุดพิกัดทางภูมิศาสตร์พร้อมกับข้อมูลเกี่ยวกับหัวเรื่องและความเร็ว

ตารางต่อไปนี้อธิบายคุณสมบัติของวัตถุ Position สำหรับคุณสมบัติทางเลือกหากระบบไม่สามารถระบุค่าได้ค่าของคุณสมบัติจะถูกตั้งค่าเป็น null

ทรัพย์สิน ประเภท คำอธิบาย
coords วัตถุ ระบุตำแหน่งทางภูมิศาสตร์ของอุปกรณ์ ตำแหน่งจะแสดงเป็นชุดพิกัดทางภูมิศาสตร์พร้อมกับข้อมูลเกี่ยวกับหัวเรื่องและความเร็ว
coords.latitude จำนวน ระบุค่าประมาณละติจูดเป็นองศาทศนิยม ช่วงค่าคือ [-90.00, +90.00]
coords. ลองจิจูด จำนวน ระบุค่าประมาณลองจิจูดเป็นองศาทศนิยม ช่วงค่าคือ [-180.00, +180.00]
coords.altitude จำนวน [ไม่บังคับ] ระบุระดับความสูงโดยประมาณเป็นเมตรเหนือวงรี WGS 84
coords ความถูกต้อง จำนวน [ไม่บังคับ] ระบุความแม่นยำของการประมาณละติจูดและลองจิจูดเป็นเมตร
coords.altitudeAccuracy จำนวน [ไม่บังคับ] ระบุความแม่นยำของการประมาณระดับความสูงเป็นเมตร
coords.heading จำนวน [ไม่บังคับ] ระบุทิศทางการเคลื่อนที่ปัจจุบันของอุปกรณ์เป็นองศานับตามเข็มนาฬิกาเทียบกับทิศเหนือจริง
coords.speed จำนวน [ไม่บังคับ] ระบุความเร็วพื้นปัจจุบันของอุปกรณ์เป็นเมตรต่อวินาที
การประทับเวลา วันที่ ระบุเวลาที่ดึงข้อมูลตำแหน่งและอ็อบเจ็กต์ Position ที่สร้างขึ้น

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างที่ใช้ประโยชน์จากออบเจ็กต์ Position วิธี showLocation เป็นวิธีการโทรกลับ -

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

การจัดการข้อผิดพลาด

ตำแหน่งทางภูมิศาสตร์มีความซับซ้อนและจำเป็นอย่างมากที่จะต้องจับข้อผิดพลาดและจัดการกับมันอย่างสง่างาม

เมธอด geolocations getCurrentPosition () และ watchPosition () ใช้ประโยชน์จากวิธีการโทรกลับของตัวจัดการข้อผิดพลาดซึ่งให้ PositionErrorวัตถุ. วัตถุนี้มีคุณสมบัติสองประการดังต่อไปนี้ -

ทรัพย์สิน ประเภท คำอธิบาย
รหัส จำนวน มีรหัสตัวเลขสำหรับข้อผิดพลาด
ข้อความ สตริง มีคำอธิบายข้อผิดพลาดที่มนุษย์อ่านได้

ตารางต่อไปนี้อธิบายรหัสข้อผิดพลาดที่เป็นไปได้ที่ส่งคืนในวัตถุ PositionError

รหัส คงที่ คำอธิบาย
0 ข้อผิดพลาดที่ไม่รู้จัก วิธีการเรียกข้อมูลตำแหน่งของอุปกรณ์ล้มเหลวเนื่องจากข้อผิดพลาดที่ไม่รู้จัก
1 PERMISSION_DENIED วิธีการดึงข้อมูลตำแหน่งของอุปกรณ์ไม่สำเร็จเนื่องจากแอปพลิเคชันไม่มีสิทธิ์ในการใช้บริการตำแหน่ง
2 POSITION_UNAVAILABLE ไม่สามารถระบุตำแหน่งของอุปกรณ์ได้
3 หมดเวลา เมธอดไม่สามารถดึงข้อมูลตำแหน่งภายในช่วงระยะหมดเวลาสูงสุดที่ระบุ

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างที่ใช้ออบเจ็กต์ PositionError นี่คือวิธี errorHandler เป็นวิธีการโทรกลับ -

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

ตัวเลือกตำแหน่ง

ต่อไปนี้เป็นไวยากรณ์จริงของเมธอด getCurrentPosition () -

getCurrentPosition(callback, ErrorCallback, options)

นี่คืออาร์กิวเมนต์ที่สามคือ PositionOptions วัตถุซึ่งระบุชุดตัวเลือกสำหรับการดึงตำแหน่งทางภูมิศาสตร์ของอุปกรณ์

ต่อไปนี้เป็นตัวเลือกที่สามารถระบุเป็นอาร์กิวเมนต์ที่สาม -

ทรัพย์สิน ประเภท คำอธิบาย
enableHighAccuracy บูลีน ระบุว่าวิดเจ็ตต้องการรับการประมาณตำแหน่งที่แม่นยำที่สุดเท่าที่จะเป็นไปได้หรือไม่ โดยค่าเริ่มต้นนี่เป็นเท็จ
หมดเวลา จำนวน คุณสมบัติการหมดเวลาคือจำนวนมิลลิวินาทีที่เว็บแอปพลิเคชันของคุณยินดีที่จะรอตำแหน่ง
maximumAge จำนวน ระบุเวลาหมดอายุเป็นมิลลิวินาทีสำหรับข้อมูลตำแหน่งที่แคช

ตัวอย่าง

ต่อไปนี้เป็นโค้ดตัวอย่างที่แสดงวิธีใช้วิธีการดังกล่าวข้างต้น -

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

Microdata เป็นวิธีมาตรฐานในการให้ความหมายเพิ่มเติมในหน้าเว็บของคุณ

Microdata ช่วยให้คุณกำหนดองค์ประกอบที่คุณกำหนดเองและเริ่มฝังคุณสมบัติที่กำหนดเองในหน้าเว็บของคุณ ในระดับสูง microdata ประกอบด้วยกลุ่มคู่ชื่อ - ค่า

เรียกว่ากลุ่มต่างๆ itemsและชื่อ - ค่าแต่ละคู่คือ a property. รายการและคุณสมบัติแสดงโดยองค์ประกอบปกติ

ตัวอย่าง

  • ในการสร้างรายการไฟล์ itemscope ใช้แอตทริบิวต์

  • ในการเพิ่มคุณสมบัติให้กับไอเท็มไฟล์ itemprop แอตทริบิวต์ถูกใช้กับหนึ่งในผู้สืบทอดของรายการ

ที่นี่มีสองรายการซึ่งแต่ละรายการมีคุณสมบัติ "ชื่อ" -

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติโดยทั่วไปมีค่าที่เป็นสตริง แต่สามารถมีชนิดข้อมูลต่อไปนี้ -

แอตทริบิวต์ส่วนกลาง

Microdata แนะนำแอตทริบิวต์ส่วนกลาง 5 รายการซึ่งจะพร้อมใช้งานสำหรับองค์ประกอบใด ๆ ที่จะใช้และให้บริบทสำหรับเครื่องเกี่ยวกับข้อมูลของคุณ

ซีเนียร์ คุณสมบัติและคำอธิบาย
1

itemscope

สิ่งนี้ใช้เพื่อสร้างไอเท็ม แอตทริบิวต์ itemscope เป็นแอตทริบิวต์บูลีนที่บอกว่ามี Microdata ในหน้านี้และนี่คือจุดเริ่มต้น
2

itemtype

แอตทริบิวต์นี้เป็น URL ที่ถูกต้องซึ่งกำหนดรายการและจัดเตรียมบริบทสำหรับคุณสมบัติ
3

itemid

แอตทริบิวต์นี้เป็นตัวระบุส่วนกลางสำหรับรายการ
4

itemprop

แอตทริบิวต์นี้กำหนดคุณสมบัติของรายการ
5

itemref

แอตทริบิวต์นี้ให้รายการขององค์ประกอบเพิ่มเติมเพื่อรวบรวมข้อมูลเพื่อค้นหาคู่ชื่อ - ค่าของรายการ

คุณสมบัติประเภทข้อมูล

คุณสมบัติโดยทั่วไปมีค่าที่เป็นสตริงตามที่กล่าวไว้ในตัวอย่างข้างต้น แต่ยังสามารถมีค่าที่เป็น URL ได้ ตัวอย่างต่อไปนี้มีคุณสมบัติหนึ่งรายการ "รูปภาพ" ซึ่งมีค่าเป็น URL -

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

คุณสมบัติยังสามารถมีค่าที่เป็นวันเวลาหรือวันที่และเวลา สิ่งนี้ทำได้โดยใช้ไฟล์time องค์ประกอบและของมัน datetime แอตทริบิวต์

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติยังสามารถเป็นกลุ่มของคู่ชื่อ - ค่าได้โดยการใส่แอตทริบิวต์ itemscope บนองค์ประกอบที่ประกาศคุณสมบัติ

รองรับ Microdata API

หากเบราว์เซอร์รองรับ HTML5 microdata API จะมีฟังก์ชัน getItems () บนวัตถุเอกสารส่วนกลาง หากเบราว์เซอร์ไม่รองรับ microdata ฟังก์ชัน getItems () จะไม่ถูกกำหนด

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr ยังไม่รองรับการตรวจสอบ microdata API ดังนั้นคุณจะต้องใช้ฟังก์ชันเหมือนกับที่ระบุไว้ข้างต้น

มาตรฐานไมโครดาต้า HTML5 ประกอบด้วยทั้งมาร์กอัป HTML (โดยเฉพาะสำหรับเครื่องมือค้นหา) และชุดฟังก์ชัน DOM (สำหรับเบราว์เซอร์เป็นหลัก)

คุณสามารถรวมมาร์กอัป microdata ในหน้าเว็บของคุณและเครื่องมือค้นหาที่ไม่เข้าใจแอตทริบิวต์ microdata จะเพิกเฉยต่อสิ่งเหล่านี้ แต่ถ้าคุณต้องการเข้าถึงหรือจัดการไมโครดาต้าผ่าน DOM คุณจะต้องตรวจสอบว่าเบราว์เซอร์รองรับ microdata DOM API หรือไม่

การกำหนดคำศัพท์ Microdata

ในการกำหนดคำศัพท์ microdata คุณต้องมี URL เนมสเปซที่ชี้ไปยังหน้าเว็บที่ใช้งานได้ ตัวอย่างเช่น https://data-vocabulary.org/Person สามารถใช้เป็นเนมสเปซสำหรับคำศัพท์ microdata ส่วนตัวพร้อมคุณสมบัติที่มีชื่อต่อไปนี้ -

  • name - ชื่อบุคคลเป็นสตริงธรรมดา

  • Photo - URL ไปยังรูปภาพของบุคคล

  • URL - เว็บไซต์ที่เป็นของบุคคล

การใช้เกี่ยวกับคุณสมบัติ microdata ของบุคคลอาจเป็นดังนี้ -

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

Google สนับสนุน Microdata ซึ่งเป็นส่วนหนึ่งของโปรแกรม Rich Snippets เมื่อโปรแกรมรวบรวมข้อมูลเว็บของ Google แยกวิเคราะห์หน้าเว็บของคุณและพบคุณสมบัติของไมโครดาต้าที่สอดคล้องกับ http://datavocabulary.org/ คำศัพท์ส่วนบุคคลโปรแกรมจะแยกวิเคราะห์คุณสมบัติเหล่านั้นและจัดเก็บไว้ข้างข้อมูลส่วนที่เหลือของหน้า

คุณสามารถทดสอบตัวอย่างข้างต้นโดยใช้Rich Snippets Testing Tool โดยใช้ http://www.tutorialspoint.com/html5/microdata.htm

สำหรับการพัฒนาเพิ่มเติมเกี่ยวกับ Microdata คุณสามารถอ้างถึงHTML5 Microdataได้ตลอดเวลา

Drag and Drop (DnD) เป็นแนวคิด User Interface ที่ทรงพลังซึ่งทำให้ง่ายต่อการคัดลอกจัดลำดับและลบรายการด้วยความช่วยเหลือของการคลิกเมาส์ วิธีนี้ช่วยให้ผู้ใช้สามารถคลิกปุ่มเมาส์ค้างไว้เหนือองค์ประกอบลากไปยังตำแหน่งอื่นแล้วปล่อยปุ่มเมาส์เพื่อวางองค์ประกอบที่นั่น

เพื่อให้สามารถใช้งานฟังก์ชันลากและวางด้วย HTML4 แบบเดิมได้นักพัฒนาอาจต้องใช้การเขียนโปรแกรม JavaScript ที่ซับซ้อนหรือเฟรมเวิร์ก JavaScript อื่น ๆ เช่น jQuery เป็นต้น

ตอนนี้ HTML 5 มาพร้อมกับ Drag and Drop (DnD) API ที่นำการรองรับ DnD ดั้งเดิมมาสู่เบราว์เซอร์ทำให้ง่ายต่อการเขียนโค้ด

HTML 5 DnD รองรับเบราว์เซอร์หลัก ๆ เช่น Chrome, Firefox 3.5 และ Safari 4 เป็นต้น

ลากและวางเหตุการณ์

มีหลายเหตุการณ์ที่เกิดขึ้นระหว่างขั้นตอนต่างๆของการดำเนินการลากและวาง เหตุการณ์เหล่านี้แสดงไว้ด้านล่าง -

ซีเนียร์ เหตุการณ์และคำอธิบาย
1

dragstart

เริ่มทำงานเมื่อผู้ใช้เริ่มลากวัตถุ
2

dragenter

เริ่มทำงานเมื่อเมาส์ถูกย้ายไปที่องค์ประกอบเป้าหมายเป็นครั้งแรกในขณะที่เกิดการลาก ผู้ฟังสำหรับเหตุการณ์นี้ควรระบุว่าอนุญาตให้วางตำแหน่งนี้หรือไม่ หากไม่มีผู้ฟังหรือผู้ฟังไม่มีการดำเนินการใด ๆ จะไม่อนุญาตให้ปล่อยโดยค่าเริ่มต้น
3

dragover

เหตุการณ์นี้จะเริ่มทำงานเมื่อเมาส์ถูกย้ายไปที่องค์ประกอบเมื่อเกิดการลาก โดยส่วนใหญ่แล้วการดำเนินการที่เกิดขึ้นระหว่างผู้ฟังจะเหมือนกับเหตุการณ์ dragenter
4

dragleave

เหตุการณ์นี้จะเริ่มทำงานเมื่อเมาส์ออกจากองค์ประกอบในขณะที่เกิดการลาก ผู้ฟังควรลบเครื่องหมายไฮไลต์หรือเครื่องหมายแทรกที่ใช้สำหรับแสดงความคิดเห็น
5

drag

จะเริ่มทำงานทุกครั้งที่เลื่อนเมาส์ในขณะที่กำลังลากวัตถุ
6

drop

เหตุการณ์การดร็อปจะเริ่มทำงานบนองค์ประกอบที่เกิดการดร็อปเมื่อสิ้นสุดการดำเนินการลาก ผู้ฟังจะต้องรับผิดชอบในการดึงข้อมูลที่ถูกลากและใส่ไว้ที่ตำแหน่งวาง
7

dragend

เริ่มทำงานเมื่อผู้ใช้ปล่อยปุ่มเมาส์ขณะลากวัตถุ

Note- โปรดทราบว่าเหตุการณ์ลากเท่านั้นที่จะเริ่มทำงาน เหตุการณ์ของเมาส์เช่นmousemoveจะไม่ทำงานระหว่างการลาก

วัตถุ DataTransfer

วิธีการฟังเหตุการณ์สำหรับเหตุการณ์การลากและวางทั้งหมดยอมรับ Event ซึ่งมีแอตทริบิวต์แบบอ่านอย่างเดียวที่เรียกว่า dataTransfer.

event.dataTransfer ผลตอบแทน DataTransfer วัตถุที่เกี่ยวข้องกับเหตุการณ์ดังต่อไปนี้ -

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

DataTransferวัตถุเก็บข้อมูลเกี่ยวกับการดำเนินการลากและวาง ข้อมูลนี้สามารถเรียกดูและตั้งค่าในแง่ของแอตทริบิวต์ต่างๆที่เกี่ยวข้องกับออบเจ็กต์ DataTransfer ตามที่อธิบายไว้ด้านล่าง -

ซีเนียร์ แอตทริบิวต์ DataTransfer และคำอธิบาย
1

dataTransfer.dropEffect [ = value ]

  • ส่งคืนชนิดของการดำเนินการที่เลือกในปัจจุบัน

  • สามารถตั้งค่าแอตทริบิวต์นี้เพื่อเปลี่ยนการดำเนินการที่เลือก

  • ค่าที่เป็นไปได้คือไม่มีคัดลอกลิงก์และย้าย
2

dataTransfer.effectAllowed [ = value ]

  • ส่งคืนชนิดของการดำเนินการที่จะได้รับอนุญาต

  • สามารถตั้งค่าแอตทริบิวต์นี้เพื่อเปลี่ยนการดำเนินการที่อนุญาต

  • ค่าที่เป็นไปได้คือ none, copy, copyLink, copyMove, link, linkMove, move, all และ uninitialized.
3

dataTransfer.types

ส่งคืน DOMStringList ที่แสดงรายการรูปแบบที่กำหนดไว้ในเหตุการณ์ dragstart นอกจากนี้หากมีการลากไฟล์ประเภทใดประเภทหนึ่งจะเป็นสตริง "ไฟล์"
4

dataTransfer.clearData ( [ format ] )

ลบข้อมูลของรูปแบบที่ระบุ ลบข้อมูลทั้งหมดหากไม่ใส่อาร์กิวเมนต์
5

dataTransfer.setData(format, data)

เพิ่มข้อมูลที่ระบุ
6

data = dataTransfer.getData(format)

ส่งคืนข้อมูลที่ระบุ หากไม่มีข้อมูลดังกล่าวให้ส่งคืนสตริงว่าง
7

dataTransfer.files

ส่งคืน FileList ของไฟล์ที่ถูกลากถ้ามี
8

dataTransfer.setDragImage(element, x, y)

ใช้องค์ประกอบที่กำหนดเพื่ออัปเดตข้อเสนอแนะการลากแทนที่คำติชมที่ระบุไว้ก่อนหน้านี้
9

dataTransfer.addElement(element)

เพิ่มองค์ประกอบที่กำหนดในรายการองค์ประกอบที่ใช้ในการแสดงผลการตอบรับการลาก

ลากและวางกระบวนการ

ต่อไปนี้เป็นขั้นตอนที่ต้องดำเนินการเพื่อใช้งาน Drag and Drop -

ขั้นตอนที่ 1 - สร้าง Object Draggable

นี่คือขั้นตอนที่ต้องดำเนินการ -

  • หากคุณต้องการลากองค์ประกอบคุณต้องตั้งค่าไฟล์ draggable แอตทริบิวต์ถึง true สำหรับองค์ประกอบนั้น

  • ตั้งค่าตัวฟังเหตุการณ์สำหรับ dragstart ที่เก็บข้อมูลที่กำลังลาก

  • ผู้ฟังเหตุการณ์ dragstart จะตั้งค่าเอฟเฟกต์ที่อนุญาต (คัดลอกย้ายลิงค์หรือบางอย่างรวมกัน)

ต่อไปนี้เป็นตัวอย่างในการทำให้วัตถุลากได้ -

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ขั้นตอนที่ 2 - การทิ้งวัตถุ

ในการยอมรับการดร็อปเป้าหมายการดร็อปต้องฟังเหตุการณ์อย่างน้อยสามเหตุการณ์

  • dragenterเหตุการณ์ซึ่งใช้เพื่อกำหนดว่าเป้าหมายการดร็อปนั้นจะยอมรับการดร็อปหรือไม่ หากต้องการรับการดร็อปกิจกรรมนี้จะต้องถูกยกเลิก

  • dragoverเหตุการณ์ซึ่งใช้ในการกำหนดความคิดเห็นที่จะแสดงต่อผู้ใช้ หากเหตุการณ์ถูกยกเลิกข้อเสนอแนะ (โดยทั่วไปคือเคอร์เซอร์) จะได้รับการอัปเดตตามค่าแอตทริบิวต์ dropEffect

  • สุดท้าย drop เหตุการณ์ซึ่งช่วยให้สามารถดำเนินการลดลงจริงได้

ต่อไปนี้เป็นตัวอย่างการวางวัตถุลงในวัตถุอื่น -

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

JavaScript ได้รับการออกแบบให้ทำงานในสภาพแวดล้อมเธรดเดียวซึ่งหมายความว่าสคริปต์หลายตัวไม่สามารถทำงานในเวลาเดียวกันได้ พิจารณาสถานการณ์ที่คุณต้องจัดการกับเหตุการณ์ UI สืบค้นและประมวลผลข้อมูล API จำนวนมากและจัดการ DOM

JavaScript จะหยุดเบราว์เซอร์ของคุณในสถานการณ์ที่การใช้งาน CPU สูง ให้เรายกตัวอย่างง่ายๆที่ JavaScript ผ่านวงใหญ่ -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         function bigLoop() {
            
            for (var i = 0; i <= 10000; i += 1) {
               var j = i;
            }
            alert("Completed " + j + "iterations" );
         }
         
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
      
   </head>
   
   <body>
      <input type = "button" onclick = "bigLoop();" value = "Big Loop" />
      <input type = "button" onclick = "sayHello();" value = "Say Hello" />
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เมื่อคุณคลิกปุ่ม Big Loop จะแสดงผลลัพธ์ต่อไปนี้ใน Firefox -

Web Workers คืออะไร?

สถานการณ์ที่อธิบายข้างต้นสามารถจัดการได้โดยใช้ Web Workers ใครจะทำงานที่มีราคาแพงในการคำนวณทั้งหมดโดยไม่ขัดจังหวะส่วนติดต่อผู้ใช้และโดยทั่วไปจะทำงานบนเธรดแยก

Web Workers อนุญาตให้ใช้สคริปต์ที่ทำงานเป็นเวลานานซึ่งไม่ถูกขัดจังหวะโดยสคริปต์ที่ตอบสนองต่อการคลิกหรือการโต้ตอบกับผู้ใช้อื่น ๆ และอนุญาตให้ดำเนินการงานที่ยาวนานโดยไม่ต้องยอมเพื่อให้เพจตอบสนอง

Web Workers เป็นสคริปต์พื้นหลังและมีน้ำหนักค่อนข้างมากและไม่ได้ตั้งใจให้ใช้เป็นจำนวนมาก ตัวอย่างเช่นการเปิดตัวคนงานหนึ่งคนสำหรับแต่ละพิกเซลของภาพสี่เมกะพิกเซลนั้นไม่เหมาะสม

เมื่อสคริปต์ทำงานภายใน Web Worker จะไม่สามารถเข้าถึงอ็อบเจ็กต์หน้าต่างของเว็บเพจ (window.document) ซึ่งหมายความว่า Web Workers ไม่มีสิทธิ์เข้าถึงเว็บเพจและ DOM API โดยตรง แม้ว่า Web Workers จะไม่สามารถปิดกั้น UI ของเบราว์เซอร์ได้ แต่ก็ยังสามารถใช้รอบ CPU และทำให้ระบบตอบสนองน้อยลง

Web Workers ทำงานอย่างไร?

Web Workers เริ่มต้นด้วย URL ของไฟล์ JavaScript ซึ่งมีรหัสที่ผู้ปฏิบัติงานจะเรียกใช้ รหัสนี้ตั้งค่าผู้ฟังเหตุการณ์และสื่อสารกับสคริปต์ที่สร้างจากหน้าหลัก ต่อไปนี้เป็นไวยากรณ์อย่างง่าย -

var worker = new Worker('bigLoop.js');

หากมีไฟล์ javascript ที่ระบุเบราว์เซอร์จะสร้างเธรดผู้ปฏิบัติงานใหม่ซึ่งดาวน์โหลดแบบอะซิงโครนัส หากเส้นทางไปยังผู้ปฏิบัติงานของคุณส่งกลับข้อผิดพลาด 404 ผู้ปฏิบัติงานจะล้มเหลวโดยไม่โต้ตอบ

หากแอปพลิเคชันของคุณมีไฟล์ JavaScript ที่รองรับหลายไฟล์คุณสามารถนำเข้าได้ importScripts() วิธีการที่ใช้ชื่อไฟล์เป็นอาร์กิวเมนต์โดยคั่นด้วยลูกน้ำดังนี้ -

importScripts("helper.js", "anotherHelper.js");

เมื่อสร้าง Web Worker แล้วการสื่อสารระหว่าง Web Worker และเพจพาเรนต์จะทำได้โดยใช้ไฟล์ postMessage()วิธี. ขึ้นอยู่กับเบราว์เซอร์ / เวอร์ชันของคุณ postMessage () สามารถยอมรับสตริงหรือออบเจ็กต์ JSON เป็นอาร์กิวเมนต์เดียว

ข้อความที่ส่งผ่านโดย Web Worker สามารถเข้าถึงได้โดยใช้ onmessageเหตุการณ์ในหน้าหลัก ตอนนี้ให้เราเขียนตัวอย่าง bigLoop ของเราโดยใช้ Web Worker ด้านล่างนี้คือหน้าหลัก (hello.htm) ซึ่งจะวางไข่ผู้ปฏิบัติงานบนเว็บเพื่อดำเนินการลูปและส่งคืนค่าสุดท้ายของตัวแปรj -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

ต่อไปนี้เป็นเนื้อหาของไฟล์ bigLoop.js สิ่งนี้ใช้ประโยชน์จากไฟล์postMessage() API เพื่อส่งการสื่อสารกลับไปที่หน้าหลัก -

for (var i = 0; i <= 1000000000; i += 1) {
   var j = i;
}
postMessage(j);

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การหยุด Web Workers

Web Workers ไม่ได้หยุดด้วยตัวเอง แต่เพจที่เริ่มต้นสามารถหยุดพวกเขาได้ด้วยการโทร terminate() วิธี.

worker.terminate();

Web Worker ที่ถูกยกเลิกจะไม่ตอบสนองต่อข้อความหรือทำการคำนวณเพิ่มเติมใด ๆ อีกต่อไป คุณไม่สามารถรีสตาร์ทผู้ปฏิบัติงานได้ แต่คุณสามารถสร้างคนงานใหม่โดยใช้ URL เดียวกัน

การจัดการข้อผิดพลาด

ต่อไปนี้แสดงตัวอย่างของฟังก์ชันการจัดการข้อผิดพลาดในไฟล์ Web Worker JavaScript ที่บันทึกข้อผิดพลาดไปยังคอนโซล ด้วยรหัสการจัดการข้อผิดพลาดตัวอย่างข้างต้นจะเป็นดังต่อไปนี้ -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         worker.onerror = function (event) {
            console.log(event.message, event);
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

กำลังตรวจสอบการรองรับเบราว์เซอร์

ต่อไปนี้เป็นไวยากรณ์ในการตรวจหาคุณสมบัติ Web Worker ที่รองรับในเบราว์เซอร์ -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      <script src = "/js/modernizr-1.5.min.js"></script>
      
      <script>
      function myFunction() {
         
         if (Modernizr.webworkers) {
            alert("Congratulation!! you have web workers support." );
         } else {
            alert("Sorry!! you do not have web workers support." );
         }
      }
      </script>
   </head>
   
   <body>
      <button onclick = "myFunction()">Click me</button>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

indexeddb เป็นแนวคิด HTML5 ใหม่ในการจัดเก็บข้อมูลภายในเบราว์เซอร์ของผู้ใช้ indexeddb มีพลังงานมากกว่าที่จัดเก็บข้อมูลในตัวเครื่องและมีประโยชน์สำหรับแอปพลิเคชันที่ต้องการจัดเก็บข้อมูลจำนวนมาก แอปพลิเคชันเหล่านี้สามารถทำงานได้อย่างมีประสิทธิภาพมากขึ้นและโหลดได้เร็วขึ้น

ทำไมต้องใช้ indexeddb?

W3C ได้ประกาศว่าฐานข้อมูล Web SQL เป็นข้อกำหนดการจัดเก็บในเครื่องที่เลิกใช้แล้วดังนั้นนักพัฒนาเว็บจึงไม่ควรใช้เทคโนโลยีนี้อีกต่อไป indexeddb เป็นอีกทางเลือกหนึ่งสำหรับฐานข้อมูลเว็บ SQL และมีประสิทธิภาพมากกว่าเทคโนโลยีรุ่นเก่า

คุณสมบัติ

  • มันเก็บค่าคู่คีย์
  • ไม่ใช่ฐานข้อมูลเชิงสัมพันธ์
  • IndexedDB API ส่วนใหญ่เป็นแบบอะซิงโครนัส
  • ไม่ใช่ภาษาแบบสอบถามที่มีโครงสร้าง
  • ได้รับการสนับสนุนในการเข้าถึงข้อมูลจากโดเมนเดียวกัน

IndexedDB

ก่อนที่จะเข้าสู่ indexeddb เราจำเป็นต้องเพิ่มคำนำหน้าของการนำไปใช้ดังที่แสดงด้านล่าง

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || 
window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || 
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || 
window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

เปิดฐานข้อมูล IndexedDB

ก่อนที่จะสร้างฐานข้อมูลเราต้องเตรียมข้อมูลบางอย่างสำหรับฐานข้อมูลเริ่มจากรายละเอียดพนักงานของ บริษัท

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
   { id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];

การเพิ่มข้อมูล

ที่นี่การเพิ่มข้อมูลด้วยตนเองลงในข้อมูลดังที่แสดงด้านล่าง -

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   request.onsuccess = function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

การดึงข้อมูล

เราสามารถดึงข้อมูลจากฐานข้อมูลโดยใช้ get ()

function read() {
   var transaction = db.transaction(["employee"]);
   var objectStore = transaction.objectStore("employee");
   var request = objectStore.get("00-03");
   
   request.onerror = function(event) {
      alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess = function(event) {
      
      if(request.result) {
         alert("Name: " + request.result.name + ", Age: 
            " + request.result.age + ", Email: " + request.result.email);
      } else {
         alert("Kenny couldn't be found in your database!");  
      }
   };
}

เมื่อใช้ get () เราสามารถจัดเก็บข้อมูลในวัตถุแทนการจัดเก็บข้อมูลในเคอร์เซอร์และเราสามารถดึงข้อมูลจากเคอร์เซอร์ได้

function readAll() {
   var objectStore = db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      
      if (cursor) {
         alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
            Age: " + cursor.value.age + ", Email: " + cursor.value.email);
         cursor.continue();
      } else {
         alert("No more entries!");
      }
   };
}

การลบข้อมูล

เราสามารถลบข้อมูลออกจาก IndexedDB ด้วยลบ () นี่คือลักษณะของโค้ด

function remove() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess = function(event) {
      alert("prasad entry has been removed from your database.");
   };
}

รหัส HTML

เพื่อแสดงข้อมูลทั้งหมดที่เราต้องใช้ในเหตุการณ์ onClick ตามที่แสดงด้านล่างรหัส -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title>IndexedDb Demo | onlyWebPro.com</title>
   </head>
   
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()"></button>
      <button onclick = "add()"></button>
      <button onclick = "remove()">Delete </button>
   </body>
</html>

รหัสสุดท้ายควรเป็น -

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <script type = "text/javascript">
         
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //prefixes of window.IDB objects
         window.IDBTransaction = window.IDBTransaction || 
         window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || 
         window.msIDBKeyRange
         
         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB.")
         }
         
         const employeeData = [
            { id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
            { id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
         ];
         var db;
         var request = window.indexedDB.open("newDatabase", 1);
         
         request.onerror = function(event) {
            console.log("error: ");
         };
         
         request.onsuccess = function(event) {
            db = request.result;
            console.log("success: "+ db);
         };
         
         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
         
         function read() {
            var transaction = db.transaction(["employee"]);
            var objectStore = transaction.objectStore("employee");
            var request = objectStore.get("00-03");
            
            request.onerror = function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess = function(event) {
               // Do something with the request.result!
               if(request.result) {
                  alert("Name: " + request.result.name + ", 
                     Age: " + request.result.age + ", Email: " + request.result.email);
               } else {
                  alert("Kenny couldn't be found in your database!");
               }
            };
         }
         
         function readAll() {
            var objectStore = db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
                     Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               } else {
                  alert("No more entries!");
               }
            };
         }
         
         function add() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
            
            request.onsuccess = function(event) {
               alert("Kenny has been added to your database.");
            };
            
            request.onerror = function(event) {
               alert("Unable to add data\r\nKenny is aready exist in your database! ");
            }
         }
         
         function remove() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess = function(event) {
               alert("Kenny's entry has been removed from your database.");
            };
         }
      </script>
      
   </head>
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()">Read all </button>
      <button onclick = "add()">Add data </button>
      <button onclick = "remove()">Delete data </button>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การส่งข้อความทางเว็บคือความสามารถในการส่งข้อความเรียลไทม์จากเซิร์ฟเวอร์ไปยังเบราว์เซอร์ไคลเอนต์ จะลบล้างปัญหาการสื่อสารข้ามโดเมนในโดเมนโปรโตคอลหรือพอร์ตต่างๆ

ตัวอย่างเช่นคุณต้องการส่งข้อมูลจากเพจของคุณไปยังคอนเทนเนอร์โฆษณาซึ่งวางไว้ที่ iframe หรือในทางกลับกันเบราว์เซอร์จะแสดงข้อยกเว้นด้านความปลอดภัย ด้วยการส่งข้อความทางเว็บเราสามารถส่งผ่านข้อมูลเป็นเหตุการณ์ข้อความได้

เหตุการณ์ข้อความ

เหตุการณ์ข้อความทำให้การส่งข้อความข้ามเอกสารการส่งข้อความแชนเนลเหตุการณ์ที่เซิร์ฟเวอร์ส่งและเว็บซ็อกเก็ตได้อธิบายไว้โดยอินเทอร์เฟซ Message Event

คุณลักษณะ

ซีเนียร์ คุณสมบัติและคำอธิบาย
1

data

มีข้อมูลสตริง
2

origin

มีชื่อโดเมนและพอร์ต
3

lastEventId

มีตัวระบุเฉพาะสำหรับเหตุการณ์ข้อความปัจจุบัน
4

source

ประกอบด้วยการอ้างอิงถึงหน้าต่างของเอกสารต้นทาง
5

ports

มีข้อมูลที่ส่งโดยพอร์ตข้อความใด ๆ

การส่งข้อความข้ามเอกสาร

ก่อนที่จะส่งข้อความข้ามเอกสารเราต้องสร้างบริบทการท่องเว็บใหม่โดยการสร้าง iframe ใหม่หรือหน้าต่างใหม่ เราสามารถส่งข้อมูลโดยใช้กับ postMessage () และมีสองอาร์กิวเมนต์ พวกเขาเป็น -

  • message - ข้อความที่จะส่ง
  • targetOrigin - ชื่อแหล่งกำเนิด

ตัวอย่าง

การส่งข้อความจาก iframe ไปยังปุ่ม

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

การรับข้อความข้ามเอกสารในเอกสารการรับ

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

การส่งข้อความช่อง

การสื่อสารสองทางระหว่างบริบทการสืบค้นเรียกว่าการส่งข้อความช่อง มันมีประโยชน์สำหรับการสื่อสารข้ามแหล่งกำเนิดต่างๆ

วัตถุ MessageChannel และ MessagePort

ในขณะที่สร้าง messageChannel ภายในจะสร้างสองพอร์ตเพื่อส่งข้อมูลและส่งต่อไปยังบริบทการสืบค้นอื่น

  • postMessage() - โพสต์ช่องโยนข้อความ

  • start() - มันส่งข้อมูล

  • close() - มันปิดพอร์ต

ในสถานการณ์นี้เรากำลังส่งข้อมูลจาก iframe หนึ่งไปยัง iframe อื่น ที่นี่เรากำลังเรียกใช้ข้อมูลในฟังก์ชันและส่งข้อมูลไปยัง DOM

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

โค้ดด้านบนกำลังรับข้อมูลจากพอร์ต 2 ตอนนี้จะส่งข้อมูลไปยัง iframe ที่สอง

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

ตอนนี้เอกสารที่สองจัดการข้อมูลโดยใช้ฟังก์ชัน portMsgHandler

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Cross-origin resource sharing (CORS) เป็นกลไกในการอนุญาตทรัพยากรที่ถูก จำกัด จากโดเมนอื่นในเว็บเบราว์เซอร์

สมมติว่าหากคุณคลิกที่โปรแกรมเล่นวิดีโอ HTML5ในส่วนสาธิต html5 มันจะขออนุญาตกล้อง หากผู้ใช้อนุญาตก็จะเปิดกล้องเท่านั้นมิฉะนั้นจะไม่เปิดกล้องสำหรับเว็บแอปพลิเคชัน

การร้องขอ CORS

ที่นี่ Chrome, Firefox, Opera และ Safari ทั้งหมดใช้วัตถุ XMLHttprequest2 และ Internet Explorer ใช้วัตถุ XDomainRequest ที่คล้ายกัน

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS not supported');
}

จัดการเหตุการณ์ใน CORS

ซีเนียร์ ตัวจัดการเหตุการณ์และคำอธิบาย
1

onloadstart

เริ่มการร้องขอ
2

onprogress

โหลดข้อมูลและส่งข้อมูล
3

onabort

ยกเลิกคำขอ
4

onerror

คำขอล้มเหลว
5

onload

ขอโหลดสำเร็จ
6

ontimeout

หมดเวลาก่อนที่คำขอจะเสร็จสมบูรณ์
7

onloadend

เมื่อคำขอเสร็จสมบูรณ์ไม่ว่าจะสำเร็จหรือล้มเหลว

ตัวอย่างเหตุการณ์ onload หรือ onerror

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

ตัวอย่าง CORS พร้อมตัวจัดการ

ตัวอย่างด้านล่างนี้จะแสดงตัวอย่างของ makeCorsRequest () และ onload handler

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

Web RTC ที่แนะนำโดย World Wide Web Consortium (W3C) ที่รองรับแอปพลิเคชันเบราว์เซอร์สำหรับการโทรด้วยเสียงวิดีโอแชทและการแชร์ไฟล์ P2P

ถ้าคุณต้องการที่จะลอง? เว็บ RTC พร้อมใช้งานสำหรับ Chrome, Opera และ Firefox สถานที่ที่ดีที่จะเริ่มต้นเป็นโปรแกรมแชทที่เรียบง่ายที่นี่ Web RTC ใช้ API สามตัวดังที่แสดงด้านล่าง -

  • MediaStream - เข้าถึงกล้องและไมโครโฟนของผู้ใช้

  • RTCPeerConnection - เข้าถึงสิ่งอำนวยความสะดวกการโทรด้วยเสียงหรือวิดีโอ

  • RTCDataChannel - เข้าถึงการสื่อสารแบบเพียร์ทูเพียร์

MediaStream

MediaStream แสดงให้เห็นถึงกระแสการประสานสื่อตัวอย่างเช่นคลิกบนเครื่องเล่นวิดีโอ HTML5 ใน HTML5 สาธิตส่วนหรืออื่น ๆ คลิกที่นี่

ตัวอย่างข้างต้นประกอบด้วย stream.getAudioTracks () และ stream.VideoTracks () หากไม่มีแทร็กเสียงจะส่งคืนอาร์เรย์ว่างและจะตรวจสอบสตรีมวิดีโอหากเชื่อมต่อเว็บแคม stream.getVideoTracks () จะส่งคืนอาร์เรย์ของ MediaStreamTrack หนึ่งรายการที่แสดงถึงสตรีมจากเว็บแคม ตัวอย่างง่ายๆคือแอปพลิเคชันแชทแอปพลิเคชั่นแชทรับสตรีมจากกล้องเว็บกล้องหลังไมโครโฟน

โค้ดตัวอย่างของ MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

จับภาพหน้าจอ

นอกจากนี้ยังสามารถทำได้ในเบราว์เซอร์ Chrome ที่มี mediaStreamSource และต้องใช้ HTTPS คุณสมบัตินี้ยังไม่มีในโอเปร่า ตัวอย่างการสาธิตสามารถดูได้ที่นี่

การควบคุมเซสชันข้อมูลเครือข่ายและสื่อ

Web RTC ต้องการการสื่อสารแบบเพียร์ทูเพียร์ระหว่างเบราว์เซอร์ กลไกนี้จำเป็นต้องมีการส่งสัญญาณข้อมูลเครือข่ายการควบคุมเซสชันและข้อมูลสื่อ นักพัฒนาเว็บสามารถเลือกกลไกต่างๆในการสื่อสารระหว่างเบราว์เซอร์เช่น SIP หรือ XMPP หรือการสื่อสารสองทาง ตัวอย่างตัวอย่าง XHR เป็นที่นี่

ตัวอย่างโค้ดของ createSignalingChannel ()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

// run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);
   
   // send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };
   
   // once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
      remoteView.src = URL.createObjectURL(evt.stream);
   };
   
   // get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
      selfView.src = URL.createObjectURL(stream);
      pc.addStream(stream);
      
      if (isCaller)
         pc.createOffer(gotDescription);
      
      else
         pc.createAnswer(pc.remoteDescription, gotDescription);
         
         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }
   
   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);
      
      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
      
      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved