HTML5 - त्वरित गाइड

HTML5 HTML मानक सुपरसीडिंग HTML 4.01, XHTML 1.0 और XHTML 1.1 का अगला प्रमुख संशोधन है। HTML5 वर्ल्ड वाइड वेब पर सामग्री को संरचित और प्रस्तुत करने के लिए एक मानक है।

HTML5 वर्ल्ड वाइड वेब कंसोर्टियम (W3C) और वेब हाइपरटेक्स्ट एप्लिकेशन टेक्नोलॉजी वर्किंग ग्रुप (WHATWG) के बीच एक सहयोग है।

नया मानक वीडियो प्लेबैक और ड्रैग-एंड-ड्रॉप जैसी सुविधाओं को शामिल करता है जो पहले थर्ड-पार्टी ब्राउज़र प्लग-इन जैसे कि एडोब फ्लैश, माइक्रोसॉफ्ट सिल्वरलाइट और Google गियर्स पर निर्भर करते थे।

ब्राउज़र का समर्थन

Apple Safari, Google Chrome, Mozilla Firefox और Opera के नवीनतम संस्करण सभी HTML5 सुविधाओं का समर्थन करते हैं और Internet Explorer 9.0 में कुछ HTML5 कार्यक्षमता के लिए भी समर्थन होगा।

मोबाइल वेब ब्राउज़र जो आईफ़ोन, आईपैड और एंड्रॉइड फोन पर पहले से इंस्टॉल आते हैं, उन्हें HTML5 के लिए उत्कृष्ट समर्थन प्राप्त है।

नए विशेषताएँ

HTML5 कई नए तत्वों और विशेषताओं का परिचय देता है जो आधुनिक वेबसाइटों के निर्माण में आपकी सहायता कर सकते हैं। यहां HTML5 में पेश की गई कुछ प्रमुख विशेषताओं का एक सेट दिया गया है।

  • New Semantic Elements - ये <शीर्ष लेख>, <पाद>, और <खंड> जैसे हैं।

  • Forms 2.0 - HTML वेब रूपों में सुधार जहां <input> टैग के लिए नई विशेषताओं को पेश किया गया है।

  • Persistent Local Storage - तीसरे पक्ष के प्लगइन्स का सहारा लेने के बिना प्राप्त करने के लिए।

  • WebSocket - वेब अनुप्रयोगों के लिए एक अगली पीढ़ी के द्विदिश संचार प्रौद्योगिकी।

  • Server-Sent Events - एचटीएमएल 5 उन घटनाओं का परिचय देता है जो वेब सर्वर से वेब ब्राउजर तक प्रवाहित होती हैं और उन्हें सर्वर-सेंटेड इवेंट (एसएसई) कहा जाता है।

  • Canvas - यह दो-आयामी ड्राइंग सतह का समर्थन करता है जिसे आप जावास्क्रिप्ट के साथ प्रोग्राम कर सकते हैं।

  • Audio & Video - आप तृतीय-पक्ष प्लगइन्स का उपयोग किए बिना अपने वेबपृष्ठों पर ऑडियो या वीडियो एम्बेड कर सकते हैं।

  • Geolocation - अब आगंतुक आपके वेब एप्लिकेशन के साथ अपना भौतिक स्थान साझा करना चुन सकते हैं।

  • Microdata - इससे आप एचटीएमएल 5 से परे अपनी खुद की वोकैबुलरी बना सकते हैं और अपने वेब पेजों को कस्टम शब्दार्थ के साथ बढ़ा सकते हैं।

  • Drag and drop - एक ही वेबपेज पर आइटमों को एक स्थान से दूसरे स्थान पर खींचें और छोड़ें।

अनिच्छुक अनुकूलता

HTML5 को डिज़ाइन किया गया है, जितना संभव हो, मौजूदा वेब ब्राउज़र के साथ पिछड़े संगत होने के लिए। इसके नए फीचर्स मौजूदा फीचर्स पर बनाए गए हैं और आपको पुराने ब्राउजर के लिए कमबैक सामग्री प्रदान करने की अनुमति देते हैं।

यह जावास्क्रिप्ट की कुछ पंक्तियों का उपयोग करके अलग-अलग एचटीएमएल 5 सुविधाओं के लिए समर्थन का पता लगाने का सुझाव दिया गया है।

यदि आप HTML के किसी भी पिछले संस्करण से परिचित नहीं हैं, तो मेरा सुझाव है कि आप हमारे माध्यम से जाएँ HTML Tutorial एचटीएमएल 5 की विशेषताओं की खोज करने से पहले।

HTML 5 भाषा में एक "कस्टम" HTML सिंटैक्स है जो वेब पर प्रकाशित HTML 4 और XHTML1 दस्तावेजों के साथ संगत है, लेकिन HTML 4 की अधिक गूढ़ SGML विशेषताओं के साथ संगत नहीं है।

एचटीएमएल 5 में एक्सएचटीएमएल के समान सिंटैक्स नियम नहीं हैं, जहां हमें कम केस टैग नामों की आवश्यकता होती है, हमारे गुणों को उद्धृत करते हुए, एक विशेषता का एक मूल्य होना चाहिए और सभी खाली तत्वों को बंद करना होगा।

एचटीएमएल 5 बहुत लचीलेपन के साथ आता है और यह निम्नलिखित विशेषताओं का समर्थन करता है -

  • अपरकेस टैग नाम।
  • गुण के लिए उद्धरण वैकल्पिक हैं।
  • गुण मान वैकल्पिक हैं।
  • खाली तत्वों को बंद करना वैकल्पिक है।

DOCTYPE

HTML के पुराने संस्करणों में DOCTYPEs लंबे थे क्योंकि HTML भाषा SGML आधारित थी और इसलिए DTD के संदर्भ की आवश्यकता थी।

HTML 5 लेखक DOCTYPE को निर्दिष्ट करने के लिए सरल वाक्यविन्यास का उपयोग करेंगे -

<!DOCTYPE html>

उपरोक्त सिंटैक्स केस-असंवेदनशील है।

अक्षरों को सांकेतिक अक्षरों में बदलना

HTML 5 लेखक कैरेक्टर एन्कोडिंग को निर्दिष्ट करने के लिए सरल वाक्यविन्यास का उपयोग कर सकते हैं -

<meta charset = "UTF-8">

उपरोक्त सिंटैक्स केस-असंवेदनशील है।

<स्क्रिप्ट> टैग

निम्न प्रकार से स्क्रिप्ट तत्वों के लिए "टेक्स्ट / जावास्क्रिप्ट" के मान के साथ एक प्रकार की विशेषता जोड़ना सामान्य अभ्यास है -

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

HTML 5 आवश्यक अतिरिक्त जानकारी को हटा देता है और आप सिंटैक्स का उपयोग कर सकते हैं -

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

<लिंक> टैग

अब तक आप <लिंक> इस प्रकार लिख रहे थे -

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

HTML 5 आवश्यक अतिरिक्त जानकारी को हटा देता है और आप बस निम्नलिखित सिंटैक्स का उपयोग कर सकते हैं -

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

एचटीएमएल 5 तत्व

एचटीएमएल 5 तत्वों को प्रारंभ टैग और अंतिम टैग का उपयोग करके चिह्नित किया जाता है। बीच में टैग नाम के साथ कोण कोष्ठक का उपयोग करके टैग को सीमांकित किया गया है।

प्रारंभ टैग और अंतिम टैग के बीच अंतर यह है कि उत्तरार्द्ध में टैग नाम से पहले स्लैश शामिल है।

HTML5 तत्व का उदाहरण निम्नलिखित है -

<p>...</p>

HTML5 टैग नाम केस असंवेदनशील हैं और सभी अपरकेस या मिश्रित मामले में लिखे जा सकते हैं, हालांकि सबसे आम सम्मेलन लोअरकेस के साथ रहना है।

अधिकांश तत्वों में कुछ सामग्री होती है जैसे <p> ... </ p> में एक अनुच्छेद होता है। हालाँकि, कुछ तत्वों को किसी भी सामग्री को शामिल करने से मना किया जाता है और इन्हें शून्य तत्व के रूप में जाना जाता है। उदाहरण के लिए,br, hr, link, meta, आदि।

यहां HTML5 एलिमेंट्स की पूरी लिस्ट दी गई है ।

HTML5 विशेषताएँ

तत्वों में ऐसे गुण हो सकते हैं जिनका उपयोग किसी तत्व के विभिन्न गुणों को सेट करने के लिए किया जाता है।

कुछ विशेषताओं को विश्व स्तर पर परिभाषित किया गया है और किसी भी तत्व पर उपयोग किया जा सकता है, जबकि अन्य केवल विशिष्ट तत्वों के लिए परिभाषित किए गए हैं। सभी विशेषताओं का एक नाम और एक मूल्य है और जैसा कि नीचे उदाहरण में दिखाया गया है।

HTML5 विशेषता का उदाहरण निम्नलिखित है जो दिखाता है कि "उदाहरण" के मान का उपयोग करके वर्ग नाम की विशेषता के साथ एक दिव्य तत्व को कैसे चिह्नित किया जाए -

<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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

जैसा कि पिछले अध्याय में बताया गया है, तत्वों में ऐसे गुण हो सकते हैं जिनका उपयोग किसी तत्व के विभिन्न गुणों को सेट करने के लिए किया जाता है।

कुछ विशेषताओं को विश्व स्तर पर परिभाषित किया गया है और किसी भी तत्व पर उपयोग किया जा सकता है, जबकि अन्य केवल विशिष्ट तत्वों के लिए परिभाषित किए गए हैं। सभी विशेषताओं का एक नाम और एक मूल्य है और जैसा कि नीचे उदाहरण में दिखाया गया है।

एचटीएमएल 5 विशेषताओं का उदाहरण निम्नलिखित है जो दिखाता है कि "उदाहरण" के मान का उपयोग करके वर्ग नाम की विशेषता के साथ एक दिव्य तत्व को कैसे चिह्नित किया जाए -

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

विशेषताएँ केवल भीतर निर्दिष्ट की जा सकती हैं start tags और में कभी भी इस्तेमाल नहीं किया जाना चाहिए end tags।

HTML5 विशेषताएँ केस असंवेदनशील हैं और सभी अपरकेस या मिश्रित मामले में लिखी जा सकती हैं, हालांकि सबसे आम सम्मेलन लोअरकेस के साथ रहना है।

मानक गुण

नीचे सूचीबद्ध विशेषताएँ लगभग सभी HTML 5 टैग द्वारा समर्थित हैं।

गुण विकल्प समारोह
आगमन चाबी उपयोगकर्ता परिभाषित किसी तत्व तक पहुंचने के लिए एक कीबोर्ड शॉर्टकट निर्दिष्ट करता है।
संरेखित दाएँ, बाएँ, केंद्र क्षैतिज रूप से टैग संरेखित करता है
पृष्ठभूमि यूआरएल एक तत्व के पीछे एक पृष्ठभूमि छवि रखता है
bgcolor संख्यात्मक, हेक्सिडेसिमल, आरजीबी मान एक तत्व के पीछे एक पृष्ठभूमि रंग रखता है
कक्षा उपयोगकर्ता परिभाषित कैस्केडिंग स्टाइल शीट्स के साथ उपयोग के लिए एक तत्व को वर्गीकृत करता है।
contenteditable सही गलत निर्दिष्ट करता है कि उपयोगकर्ता तत्व की सामग्री को संपादित कर सकता है या नहीं।
संदर्भ की विकल्प - सूची मेनू आईडी किसी तत्व के लिए संदर्भ मेनू निर्दिष्ट करता है।
डेटा-XXXX उपयोगकर्ता परिभाषित कस्टम विशेषताएँ। एक HTML दस्तावेज़ के लेखक अपनी विशेषताओं को परिभाषित कर सकते हैं। "डेटा-" से शुरू करना चाहिए।
खींचने योग्य सच, झूठ, ऑटो निर्दिष्ट करता है कि उपयोगकर्ता को किसी तत्व को खींचने की अनुमति है या नहीं।
ऊंचाई अंकीय मान तालिका, चित्र, या तालिका कोशिकाओं की ऊँचाई निर्दिष्ट करता है।
छिपा हुआ छिपा हुआ निर्दिष्ट करता है कि तत्व दिखाई देना चाहिए या नहीं।
ईद उपयोगकर्ता परिभाषित कैस्केडिंग स्टाइल शीट्स के साथ एक तत्व का नाम।
मद तत्वों की सूची समूह तत्वों के लिए उपयोग किया जाता है।
itemprop वस्तुओं की सूचि समूह आइटम के लिए उपयोग किया जाता है।
अक्षर जाँच लें सही गलत निर्दिष्ट करता है कि तत्व में वर्तनी या व्याकरण की जाँच होनी चाहिए।
अंदाज सीएसएस स्टाइल शीट एक तत्व के लिए एक इनलाइन शैली निर्दिष्ट करता है।
विषय उपयोगकर्ता परिभाषित आईडी तत्व के संगत आइटम को निर्दिष्ट करता है।
tabindex टैब नंबर किसी तत्व का टैब क्रम निर्दिष्ट करता है।
शीर्षक उपयोगकर्ता परिभाषित आपके तत्वों के लिए "पॉप-अप" शीर्षक।
वेलिजन ऊपर, बीच, नीचे एक HTML तत्व के भीतर टैग्स को अनुलंब रूप से संरेखित करें।
चौड़ाई अंकीय मान तालिका, चित्र या तालिका कोशिकाओं की चौड़ाई निर्दिष्ट करता है।

HTML5 टैग और संबंधित विशेषताओं की पूरी सूची के लिए, कृपया HTML5 टैग के लिए हमारे संदर्भ की जाँच करें ।

कस्टम विशेषताएँ

HTML 5 में पेश की जा रही एक नई सुविधा कस्टम डेटा विशेषताओं का जोड़ है।

एक कस्टम डेटा विशेषता के साथ शुरू होता है data-और आपकी आवश्यकता के आधार पर नामित किया जाएगा। यहाँ एक सरल उदाहरण है -

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

उपरोक्त कोड दो कस्टम विशेषताओं के साथ पूरी तरह से मान्य HTML5 होगा, जिन्हें डेटाबजेक्ट और डेटा-स्तर कहा जाता है । आप जावास्क्रिप्ट एपीआई या सीएसएस का उपयोग करके इन विशेषताओं के मूल्यों को उसी तरह प्राप्त करने में सक्षम होंगे जैसे आप मानक विशेषताओं के लिए प्राप्त करते हैं।

जब उपयोगकर्ता आपकी वेबसाइट पर आते हैं, तो वे विभिन्न गतिविधियाँ करते हैं जैसे कि पाठ और चित्र और लिंक पर क्लिक करना, परिभाषित तत्वों पर होवर करना, आदि ये जावास्क्रिप्ट जावास्क्रिप्ट कॉल के उदाहरण हैं। events।

हम जावास्क्रिप्ट या VBscript में अपने ईवेंट हैंडलर लिख सकते हैं और इन ईवेंट हैंडलर को ईवेंट टैग विशेषता के मान के रूप में निर्दिष्ट कर सकते हैं। HTML5 विनिर्देश नीचे सूचीबद्ध के रूप में विभिन्न घटना विशेषताओं को परिभाषित करता है -

हम किसी भी ट्रिगर करने के लिए विशेषताओं के निम्नलिखित सेट का उपयोग कर सकते हैं javascript या vbscript किसी भी HTML5 तत्व के लिए होने वाली कोई भी घटना होने पर मूल्य के रूप में दिया गया कोड।

हम बाद के अध्यायों में उन तत्वों पर विस्तार से चर्चा करते हुए तत्व-विशिष्ट घटनाओं को कवर करेंगे।

गुण मूल्य विवरण
ऑफ़लाइन लिपि दस्तावेज़ ऑफ़लाइन होने पर ट्रिगर
onabort लिपि एक गर्भपात की घटना पर ट्रिगर
onafterprint लिपि दस्तावेज़ मुद्रित होने के बाद ट्रिगर
onbeforeonload लिपि दस्तावेज़ लोड होने से पहले ट्रिगर
onbeforeprint लिपि दस्तावेज़ मुद्रित होने से पहले ट्रिगर
धब्बे पर लिपि जब विंडो फ़ोकस करता है तो ट्रिगर
oncanplay लिपि ट्रिगर जब मीडिया खेलना शुरू कर सकता है, लेकिन बफरिंग के लिए रुकना पड़ सकता है
oncanplaythrough लिपि ट्रिगर जब मीडिया बफ़रिंग के लिए रोक के बिना, अंत तक खेला जा सकता है
परिवर्तन पर लिपि जब कोई तत्व बदलता है तो ट्रिगर
क्लिक पर लिपि एक माउस क्लिक पर ट्रिगर
oncontextmenu लिपि जब संदर्भ मेनू ट्रिगर होता है तो ट्रिगर
ondblclick लिपि माउस पर ट्रिगर डबल-क्लिक करें
ondrag लिपि किसी तत्व को खींचने पर ट्रिगर
ondragend लिपि एक ड्रैग ऑपरेशन के अंत में ट्रिगर
OnDragEnter लिपि जब कोई तत्व किसी वैध ड्रॉप लक्ष्य पर खींचा जाता है तो ट्रिगर
ondragleave लिपि जब कोई तत्व एक वैध ड्रॉप लक्ष्य छोड़ता है तो ट्रिगर
ondragover लिपि जब कोई तत्व वैध ड्रॉप लक्ष्य पर खींचा जा रहा है तो ट्रिगर
ondragstart लिपि ड्रैग ऑपरेशन की शुरुआत में ट्रिगर
ondrop लिपि घसीटे जाने वाले तत्व को ट्रिगर किया जा रहा है
ondurationchange लिपि मीडिया की लंबाई बदलने पर ट्रिगर
onemptied लिपि ट्रिगर जब एक मीडिया संसाधन तत्व अचानक खाली हो जाता है।
onended लिपि ट्रिगर जब मीडिया अंत तक पहुँच गया है
onerror लिपि त्रुटि होने पर ट्रिगर
पर ध्यान केंद्रित लिपि विंडो फोकस होने पर ट्रिगर
onformchange लिपि जब कोई रूप बदलता है तो ट्रिगर
onforminput लिपि ट्रिगर जब एक फार्म उपयोगकर्ता इनपुट हो जाता है
onhaschange लिपि दस्तावेज़ बदलने पर ट्रिगर
oninput लिपि जब किसी तत्व को उपयोगकर्ता इनपुट मिलता है तो ट्रिगर
oninvalid लिपि किसी तत्व के अमान्य होने पर ट्रिगर
onkeydown लिपि ट्रिगर जब एक कुंजी दबाया जाता है
onkeypress लिपि ट्रिगर जब एक कुंजी दबाया और जारी किया जाता है
onkeyup लिपि एक कुंजी जारी होने पर ट्रिगर
गोली भरना लिपि दस्तावेज़ लोड होने पर ट्रिगर
onloadeddata लिपि मीडिया डेटा लोड होने पर ट्रिगर
onloadedmetadata लिपि एक मीडिया तत्व की अवधि और अन्य मीडिया डेटा लोड होने पर ट्रिगर
onloadstart लिपि ट्रिगर जब ब्राउज़र मीडिया डेटा लोड करना शुरू करता है
onmessage लिपि संदेश ट्रिगर होने पर ट्रिगर
onmousedown लिपि ट्रिगर जब एक माउस बटन दबाया जाता है
onmousemove लिपि जब माउस पॉइंटर चलता है तो ट्रिगर
onmouseout लिपि ट्रिगर जब माउस पॉइंटर एक तत्व से बाहर निकलता है
मूषक के ऊपर से लिपि ट्रिगर जब माउस पॉइंटर एक तत्व से अधिक चलता है
onmouseup लिपि जब माउस बटन छोड़ा जाता है तो ट्रिगर
onmousewheel लिपि ट्रिगर जब माउस व्हील घुमाया जा रहा है
onoffline लिपि दस्तावेज़ ऑफ़लाइन होने पर ट्रिगर
onoine लिपि दस्तावेज़ ऑनलाइन आने पर ट्रिगर
ononline लिपि दस्तावेज़ ऑनलाइन आने पर ट्रिगर
onpagehide लिपि जब खिड़की छिपी हो तो ट्रिगर
onpageshow लिपि विंडो दिखाई देने पर ट्रिगर
onpause लिपि मीडिया डेटा रोक दिए जाने पर ट्रिगर
onplay लिपि ट्रिगर जब मीडिया डेटा खेलना शुरू कर रहा है
onplaying लिपि ट्रिगर जब मीडिया डेटा खेलना शुरू हो गया है
onpopstate लिपि जब विंडो का इतिहास बदलता है तो ट्रिगर
प्रगति पर लिपि ट्रिगर जब ब्राउज़र मीडिया डेटा प्राप्त कर रहा है
onratechange लिपि ट्रिगर जब मीडिया डेटा की प्लेइंग रेट बदल गई हो
onreadystatechange लिपि जब तैयार स्थिति बदल जाती है तो ट्रिगर
onredo लिपि जब दस्तावेज़ एक नया प्रदर्शन करता है तो ट्रिगर
onresize लिपि विंडो के आकार बदलने पर ट्रिगर
Onscroll लिपि जब किसी तत्व के स्क्रॉलबार को स्क्रॉल किया जा रहा हो तो ट्रिगर
onseeked लिपि ट्रिगर जब मीडिया तत्व की मांग विशेषता अब सच नहीं है, और मांग समाप्त हो गई है
onseeking लिपि ट्रिगर जब एक मीडिया तत्व की मांग विशेषता सच है, और मांग शुरू हो गई है
onselect लिपि जब किसी तत्व का चयन किया जाता है तो ट्रिगर
onstalled लिपि मीडिया डेटा प्राप्त करने में त्रुटि होने पर ट्रिगर
onstorage लिपि दस्तावेज़ लोड होने पर ट्रिगर
ऑनसबमिट लिपि प्रपत्र सबमिट करने पर ट्रिगर
onsuspend लिपि ट्रिगर जब ब्राउज़र मीडिया डेटा प्राप्त कर रहा है, लेकिन पूरी मीडिया फ़ाइल को लाने से पहले रोक दिया गया था
ontimeupdate लिपि ट्रिगर जब मीडिया अपनी प्लेइंग पोजीशन बदलता है
onundo लिपि जब कोई दस्तावेज़ पूर्ववत करता है तो ट्रिगर
ऑनअनलोड लिपि उपयोगकर्ता द्वारा दस्तावेज़ छोड़ने पर ट्रिगर
onvolumechange लिपि जब मीडिया वॉल्यूम बदलता है, तब भी जब वॉल्यूम "म्यूट" पर सेट होता है
onwaiting लिपि ट्रिगर जब मीडिया ने खेलना बंद कर दिया है, लेकिन फिर से शुरू होने की उम्मीद है

वेब फ़ॉर्म 2.0 HTML4 में पाए जाने वाले फ़ॉर्म सुविधाओं का विस्तार है। HTML5 में प्रपत्र तत्व और विशेषताएँ HTML4 की तुलना में सिमेंटिक मार्क-अप की एक बड़ी डिग्री प्रदान करती हैं और हमें HTML4 में आवश्यक थकाऊ स्क्रिप्टिंग और स्टाइलिंग के एक बड़े सौदे से मुक्त करती हैं।

HTML4 में <इनपुट> तत्व

एचटीएमएल 4 इनपुट तत्व का उपयोग करते हैं type डेटा प्रकार निर्दिष्ट करने की विशेषता। HTML4 निम्नलिखित प्रकार प्रदान करता है -

अनु क्रमांक। टाइप और विवरण
1

text

एक फ्री-फॉर्म टेक्स्ट फ़ील्ड, मुख्य रूप से लाइन ब्रेक से मुक्त।
2

password

संवेदनशील जानकारी के लिए एक फ्री-फॉर्म टेक्स्ट फील्ड, नाममात्र मुफ्त में लाइन ब्रेक।
3

checkbox

पूर्वनिर्धारित सूची से शून्य या अधिक मूल्यों का एक सेट।
4

radio

एक गणना मूल्य।
5

submit

बटन का एक स्वतंत्र रूप प्रस्तुत करने की शुरुआत करता है।
6

file

MIME प्रकार के साथ एक मनमानी फ़ाइल और वैकल्पिक रूप से एक फ़ाइल नाम।
7

image

एक विशेष छवि के आकार के सापेक्ष एक समन्वय, अतिरिक्त अर्थ के साथ कि यह अंतिम मूल्य चयनित होना चाहिए और फॉर्म जमा करना आरंभ करता है।
8

hidden

एक मनमाना स्ट्रिंग जो आम तौर पर उपयोगकर्ता को प्रदर्शित नहीं होती है।
9

select

एक एन्यूमरेटेड मूल्य, रेडियो प्रकार की तरह।
10

textarea

एक मुक्त रूप पाठ क्षेत्र, मुख्य रूप से बिना किसी लाइन ब्रेक प्रतिबंध के।
1 1

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> 
 ...

HTML5 में <इनपुट> तत्व

उपर्युक्त विशेषताओं के अलावा, एचटीएमएल 5 इनपुट तत्वों ने ऊपर के लिए कई नए मूल्य पेश किए typeविशेषता। ये नीचे सूचीबद्ध हैं।

NOTE - के नवीनतम संस्करण का उपयोग कर सभी निम्नलिखित उदाहरण का प्रयास करें Opera ब्राउज़र।

अनु क्रमांक। टाइप और विवरण
1 दिनांक और समय

एक दिनांक और समय (वर्ष, माह, दिन, घंटा, मिनट, दूसरा, एक सेकंड का अंश) आईएसओ 8601 के अनुसार इनकोडिंग समय यूटीसी के लिए निर्धारित समय क्षेत्र के साथ।
2 datetime-स्थानीय

एक दिनांक और समय (वर्ष, माह, दिन, घंटा, मिनट, दूसरा, एक सेकंड का अंश) आईएसओ 8601 के अनुसार एन्कोड किया गया, जिसमें कोई समय क्षेत्र जानकारी नहीं है।
3 दिनांक

एक तारीख (वर्ष, माह, दिन) आईएसओ 8601 के अनुसार एन्कोडेड है।
4 महीना

आईएसओ 8601 के अनुसार एक वर्ष और एक महीने की एक तारीख को इनकोड किया गया।
5 सप्ताह

आईएसओ 8601 के अनुसार एक वर्ष और एक सप्ताह की संख्या वाली तारीख को एनकोड किया गया।
6 समय

आईएसओ 8601 के अनुसार एक समय (घंटा, मिनट, सेकंड, आंशिक सेकंड) एन्कोड किया गया।
7 संख्या

यह केवल संख्यात्मक मान को स्वीकार करता है। चरण विशेषता सटीक निर्दिष्ट करती है, 1 के लिए डिफ़ॉल्ट है।
8 रेंज

श्रेणी प्रकार का उपयोग इनपुट फ़ील्ड के लिए किया जाता है जिसमें संख्याओं की श्रेणी से मान होना चाहिए।
9 ईमेल

यह केवल ईमेल मूल्य को स्वीकार करता है। इस प्रकार का उपयोग इनपुट फ़ील्ड के लिए किया जाता है जिसमें ई-मेल पता होना चाहिए। यदि आप एक सरल पाठ प्रस्तुत करने का प्रयास करते हैं, तो यह केवल ईमेल पते पर ईमेल करने के लिए मजबूर करता है।
10 यूआरएल

यह केवल URL मान को स्वीकार करता है। इस प्रकार का उपयोग उन इनपुट फ़ील्ड के लिए किया जाता है जिनमें URL पता होना चाहिए। यदि आप एक साधारण पाठ प्रस्तुत करने का प्रयास करते हैं, तो यह केवल URL पते को http://www.example.com प्रारूप में या http://example.com प्रारूप में दर्ज करने के लिए बाध्य करता है।

<आउटपुट> तत्व

HTML5 ने एक नया तत्व <आउटपुट> पेश किया, जिसका उपयोग विभिन्न प्रकार के आउटपुट के परिणाम को दर्शाने के लिए किया जाता है, जैसे कि स्क्रिप्ट द्वारा लिखित आउटपुट।

आप उपयोग कर सकते हैं forदस्तावेज़ में आउटपुट तत्व और अन्य तत्वों के बीच संबंध निर्दिष्ट करने की विशेषता जो गणना को प्रभावित करती है (उदाहरण के लिए, इनपुट या पैरामीटर के रूप में)। विशेषता के लिए मान अन्य तत्वों की आईडी की एक अंतरिक्ष-पृथक सूची है।

<!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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

प्लेसहोल्डर विशेषता

एचटीएमएल 5 ने एक नई विशेषता पेश की placeholder। <इनपुट> और <textarea> तत्वों पर यह विशेषता उपयोगकर्ता को एक संकेत प्रदान करती है कि क्षेत्र में क्या दर्ज किया जा सकता है। प्लेसहोल्डर टेक्स्ट में गाड़ी का रिटर्न या लाइन-फीड नहीं होना चाहिए।

यहाँ प्लेसहोल्डर विशेषता के लिए सरल वाक्यविन्यास है -

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

यह विशेषता केवल मोज़िला, सफारी और क्रोम ब्राउज़र के नवीनतम संस्करणों द्वारा समर्थित है।

<!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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

ऑटोफोकस विशेषता

यह एक सरल वन-स्टेप पैटर्न है, आसानी से दस्तावेज़ लोड के समय जावास्क्रिप्ट में प्रोग्राम किया जाता है, स्वचालित रूप से एक विशेष फॉर्म फ़ील्ड पर ध्यान केंद्रित करता है।

एचटीएमएल 5 ने एक नई विशेषता पेश की autofocus जिसका उपयोग निम्नानुसार किया जाएगा -

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

यह विशेषता केवल मोज़िला, सफारी और क्रोम ब्राउज़र के नवीनतम संस्करणों द्वारा समर्थित है।

<!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>

आवश्यक विशेषता

अब आपको क्लाइंट-साइड सत्यापन के लिए जावास्क्रिप्ट की आवश्यकता नहीं है जैसे खाली टेक्स्ट बॉक्स कभी जमा नहीं किया जाएगा क्योंकि HTML5 ने एक नई विशेषता पेश की required जिसका उपयोग निम्नानुसार किया जाएगा और मान रखने के लिए आग्रह करेगा -

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

यह विशेषता केवल मोज़िला, सफारी और क्रोम ब्राउज़र के नवीनतम संस्करणों द्वारा समर्थित है।

<!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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

एसवीजी का मतलब है Scalable VEctor Gरैपिक्स और यह एक्सएमएल में 2 डी-ग्राफिक्स और ग्राफिकल एप्लिकेशन का वर्णन करने के लिए एक भाषा है और फिर एक्सएमएल को एसवीजी दर्शक द्वारा प्रस्तुत किया जाता है।

एसवीजी ज्यादातर वेक्टर प्रकार आरेखों जैसे पाई चार्ट, एक एक्स में दो-आयामी ग्राफ, वाई समन्वय प्रणाली आदि के लिए उपयोगी है।

एसवीजी डब्ल्यू 3 सी सिफारिश 14. जनवरी 2003 बन गई और आप एसवीजी विनिर्देश में एसवीजी विनिर्देश के नवीनतम संस्करण की जांच कर सकते हैं ।

एसवीजी फाइलें देखना

अधिकांश वेब ब्राउज़र SVG प्रदर्शित कर सकते हैं जैसे वे PNG, GIF और JPG प्रदर्शित कर सकते हैं। इंटरनेट एक्सप्लोरर उपयोगकर्ताओं को ब्राउज़र में एसवीजी देखने में सक्षम होने के लिए एडोब एसवीजी व्यूअर स्थापित करना पड़ सकता है।

एचटीएमएल 5 में एसवीजी एम्बेड करना

HTML5 सीधे SVG का उपयोग करने की अनुमति देता है <svg>...</svg> टैग जो निम्नलिखित सरल वाक्यविन्यास है -

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

फ़ायरफ़ॉक्स 3.7 ने एक कॉन्फ़िगरेशन विकल्प ("के बारे में: कॉन्फ़िगरेशन") भी पेश किया है, जहां आप निम्नलिखित चरणों का उपयोग करके एचटीएमएल 5 को सक्षम कर सकते हैं -

  • प्रकार about:config अपने फ़ायरफ़ॉक्स एड्रेस बार में।

  • "मैं सावधान रहूँगा, मैं वादा करता हूँ!" दिखाई देने वाले चेतावनी संदेश पर बटन (और सुनिश्चित करें कि आप इसका पालन करते हैं!)।

  • प्रकार html5.enable पृष्ठ के शीर्ष पर फ़िल्टर बार में।

  • वर्तमान में यह अक्षम हो जाएगा, इसलिए मान को सही करने के लिए इसे क्लिक करें।

अब आपका फ़ायरफ़ॉक्स HTML5 पार्सर सक्षम होना चाहिए और आपको निम्नलिखित उदाहरणों के साथ प्रयोग करने में सक्षम होना चाहिए।

एचटीएमएल 5 - एसवीजी सर्कल

एक SVG उदाहरण का HTML5 संस्करण निम्नलिखित है जो <वृत्त> टैग का उपयोग करके एक वृत्त खींचेगा -

<!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>

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

एचटीएमएल 5 - एसवीजी आयत

निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है, जो <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>

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

एचटीएमएल 5 - एसवीजी लाइन

निम्नलिखित 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 विशेषता जो आपको अतिरिक्त शैली की जानकारी सेट करने की अनुमति देती है जैसे स्ट्रोक और रंग भरना, स्ट्रोक की चौड़ाई, आदि।

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

एचटीएमएल 5 - एसवीजी इलिप्स

निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है जो <दीर्घवृत्त> टैग का उपयोग करके एक दीर्घवृत्त खींचेगा।

<!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>

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

एचटीएमएल 5 - एसवीजी बहुभुज

एक SVG उदाहरण का HTML5 संस्करण निम्नलिखित है जो <बहुभुज> टैग का उपयोग करके एक बहुभुज खींचेगा -

<!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>

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

एचटीएमएल 5 - एसवीजी पॉलीलाइन

निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है जो <पॉलीलाइन> टैग का उपयोग करके एक पॉलीलाइन तैयार करेगा -

<!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>

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

एचटीएमएल 5 - एसवीजी स्नातक

एसवीजी उदाहरण का एचटीएमएल 5 संस्करण निम्नलिखित है जो <ellipse> टैग का उपयोग करके एक दीर्घवृत्त खींचेगा और एक SVG रेडियल ग्रेडिएंट को परिभाषित करने के लिए <radialGradient> टैग का उपयोग करेगा।

इसी प्रकार, आप SVG रैखिक ढाल बनाने के लिए <linearGradient> टैग का उपयोग कर सकते हैं।

<!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>

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

एचटीएमएल 5 - एसवीजी स्टार

निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है जो <बहुभुज> टैग का उपयोग करके एक स्टार को आकर्षित करेगा।

<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>

यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।

HTML5 का HTML सिंटैक्स MathML तत्वों को <math> ... </ गणित> टैग का उपयोग करके दस्तावेज़ के अंदर उपयोग करने की अनुमति देता है।

अधिकांश वेब ब्राउज़र MathML टैग प्रदर्शित कर सकते हैं। यदि आपका ब्राउज़र MathML का समर्थन नहीं करता है, तो मैं आपको फ़ायरफ़ॉक्स के नवीनतम संस्करण का उपयोग करने का सुझाव दूंगा।

मठमल उदाहरण

MathML के साथ एक मान्य HTML5 दस्तावेज़ निम्नलिखित है -

<!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 वर्ण का उपयोग करना

गौर करें, निम्नलिखित मार्कअप है जो वर्णों का उपयोग करता है और इनविटाइम्स; -

<!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 जैसे उचित परिणाम नहीं देख पा रहे हैं , तो फ़ायरफ़ॉक्स 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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

यह निम्नलिखित परिणाम का उत्पादन करेगा। यदि आप उचित परिणाम नहीं देख पा रहे हैं, तो फ़ायरफ़ॉक्स 3.5 या उच्चतर संस्करण का उपयोग करें।

एचटीएमएल 5 क्लाइंट सत्र पर संरचित डेटा को संग्रहीत करने और निम्नलिखित कमियों को दूर करने के लिए, HTTP सत्र कुकीज़ के समान दो तंत्रों का परिचय देता है।

  • कुकीज़ हर HTTP अनुरोध के साथ शामिल होती हैं, जिससे उसी डेटा को संचारित करके आपके वेब एप्लिकेशन को धीमा कर दिया जाता है।

  • हर HTTP अनुरोध के साथ कुकीज़ शामिल हैं, जिससे इंटरनेट पर अनएन्क्रिप्टेड डेटा भेजा जाता है।

  • कुकीज़ लगभग 4 KB डेटा तक सीमित हैं। आवश्यक डेटा संग्रहीत करने के लिए पर्याप्त नहीं है।

दो मंजिले हैं session storage तथा local storage और उनका उपयोग विभिन्न स्थितियों को संभालने के लिए किया जाएगा।

हर ब्राउज़र का नवीनतम संस्करण इंटरनेट एक्सप्लोरर सहित HTML5 स्टोरेज का समर्थन करता है।

सत्र भंडारण

सत्र संग्रह परिदृश्यों जहां उपयोगकर्ता बाहर एक एकल लेनदेन ले जा रहा है के लिए डिज़ाइन किया गया है, लेकिन एक ही समय में अलग अलग खिड़कियों में अनेक लेन-देन से बाहर ले जाने जा सकता है।

उदाहरण

उदाहरण के लिए, यदि कोई उपयोगकर्ता एक ही साइट का उपयोग करके दो अलग-अलग खिड़कियों में हवाई जहाज का टिकट खरीदता है। यदि साइट उपयोगकर्ता द्वारा खरीदे जाने वाले टिकट को ट्रैक करने के लिए कुकीज़ का उपयोग करती है, तो जैसा कि उपयोगकर्ता दोनों खिड़कियों में पृष्ठ से पृष्ठ पर क्लिक करता है, वर्तमान में खरीदा जा रहा टिकट एक खिड़की से दूसरी खिड़की तक "लीक" होगा, संभवतः उपयोगकर्ता को पैदा करने के लिए वास्तव में सूचना के बिना एक ही उड़ान के लिए दो टिकट खरीदें।

एचटीएमएल 5 सत्र स्टॉरेज विशेषता का परिचय देता है जिसका उपयोग साइटों द्वारा सत्र भंडारण में डेटा जोड़ने के लिए किया जाएगा, और यह उस विंडो में खोले गए उसी साइट से किसी भी पृष्ठ तक पहुंच योग्य होगा, अर्थात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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

स्थानीय भंडार

स्थानीय संग्रह है कि spans एकाधिक विंडो भंडारण के लिए बनाया गया है, और वर्तमान सत्र से बाहर रहता है। विशेष रूप से, वेब एप्लिकेशन उपयोगकर्ता डेटा के मेगाबाइट्स, जैसे संपूर्ण उपयोगकर्ता-लेखक दस्तावेज़ या उपयोगकर्ता के मेलबॉक्स को प्रदर्शन कारणों से क्लाइंट साइड पर संग्रहीत करना चाह सकते हैं।

फिर से, कुकीज़ इस मामले को अच्छी तरह से नहीं संभालती हैं, क्योंकि वे हर अनुरोध के साथ प्रेषित होते हैं।

उदाहरण

HTML5 लोकलस्टोरेज विशेषता का परिचय देता है जिसका उपयोग बिना समय सीमा के किसी पृष्ठ के स्थानीय संग्रहण क्षेत्र तक पहुंचने के लिए किया जाएगा और जब भी आप उस पृष्ठ का उपयोग करेंगे तो यह स्थानीय संग्रहण उपलब्ध होगा।

निम्नलिखित कोड है जो एक स्थानीय संग्रहण चर सेट करेगा और उस चर को हर बार इस पृष्ठ तक पहुंचने पर भी, अगली बार, जब आप विंडो खोलते हैं, तो -

<!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>

यह निम्नलिखित परिणाम देगा -

वेब एसक्यूएल डेटाबेस एपीआई वास्तव में एचटीएमएल 5 विनिर्देश का हिस्सा नहीं है, लेकिन यह एक अलग विनिर्देश है जो SQL का उपयोग करके क्लाइंट-साइड डेटाबेस में हेरफेर करने के लिए एपीआई का एक सेट पेश करता है।

मैं मान रहा हूं कि आप एक महान वेब डेवलपर हैं और अगर ऐसा है तो इसमें कोई संदेह नहीं है, आप एसक्यूएल और आरडीबीएमएस अवधारणाओं के बारे में अच्छी तरह से जानते होंगे। यदि आप अभी भी एसक्यूएल के साथ एक सत्र रखना चाहते हैं, तो आप हमारे एसक्यूएल ट्यूटोरियल के माध्यम से जा सकते हैं ।

वेब एसक्यूएल डाटाबेस सफारी, क्रोम और ओपेरा के नवीनतम संस्करण में काम करेगा।

कोर तरीके

इस ट्यूटोरियल में परिभाषित करने के लिए तीन मुख्य विधियाँ निम्नलिखित हैं:

  • 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)'); 
});

उपरोक्त क्वेरी 'mydb' डेटाबेस में LOGS नामक एक टेबल बनाएगी।

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 बाहरी चर हैं, और "तर्क?" 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 दस्तावेज़ में निम्नानुसार रखते हैं और इसे सफ़ारी ब्राउज़र के साथ चलाने का प्रयास करते हैं।

<!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 वेब एप्लिकेशन 1.0 उन घटनाओं को प्रस्तुत करता है जो वेब सर्वर से वेब ब्राउज़र में प्रवाहित होती हैं और उन्हें सर्वर-सेंटेड इवेंट (SSE) कहा जाता है। SSE का उपयोग करके आप अपने वेब सर्वर से विज़िटर के ब्राउज़र पर लगातार DOM ईवेंट्स को पुश कर सकते हैं।

ईवेंट स्ट्रीमिंग दृष्टिकोण सर्वर के लिए एक सतत कनेक्शन खोलता है, क्लाइंट को डेटा भेजता है जब नई जानकारी उपलब्ध होती है, जिससे निरंतर मतदान की आवश्यकता समाप्त हो जाती है।

सर्वर द्वारा भेजी गई घटनाएं मानकीकृत करती हैं कि कैसे हम सर्वर से क्लाइंट तक डेटा स्ट्रीम करते हैं।

SSE के लिए वेब एप्लिकेशन

किसी वेब एप्लिकेशन में सर्वर-सेंटेड ईवेंट का उपयोग करने के लिए, आपको दस्तावेज़ में एक <इवेंटसोर्स> तत्व जोड़ना होगा।

src <इवेंटसोर्स> एलीमेंट की विशेषता एक ऐसे URL की ओर इशारा करती है, जो लगातार HTTP कनेक्शन प्रदान करता है जो घटनाओं से युक्त डेटा स्ट्रीम भेजता है।

URL एक PHP, PERL या किसी पायथन स्क्रिप्ट की ओर इशारा करता है जो लगातार इवेंट डेटा भेजने का ध्यान रखेगा। निम्नलिखित वेब अनुप्रयोग का एक सरल उदाहरण है जो सर्वर समय की अपेक्षा करेगा।

<!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हेडर इस प्रकार पाठ / घटना-धारा निर्दिष्ट करता है।

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

कंटेंट-टाइप सेट करने के बाद, सर्वर साइड स्क्रिप्ट भेजेगा Event: घटना के नाम के बाद टैग। उदाहरण के बाद एक नई पंक्ति वर्ण द्वारा समाप्त किए गए ईवेंट नाम के रूप में सर्वर-टाइम भेजेगा।

print "Event: server-time\n";

अंतिम चरण ईवेंट डेटा का उपयोग करके भेजना है Data: टैग जो एक नई पंक्ति वर्ण द्वारा समाप्त स्ट्रिंग मान के पूर्णांक द्वारा निम्नानुसार होगा -

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

अंत में, निम्नलिखित पूर्ण ticker.cgi पर्ल में लिखा है -

#!/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 वेब अनुप्रयोगों के लिए एक अगली पीढ़ी की द्विदिश संचार तकनीक है जो एकल सॉकेट पर काम करती है और HTML 5 अनुरूप ब्राउज़रों में जावास्क्रिप्ट इंटरफ़ेस के माध्यम से उजागर होती है।

एक बार जब आप वेब सर्वर के साथ एक वेब सॉकेट कनेक्शन प्राप्त करते हैं, तो आप कॉल करके ब्राउज़र से सर्वर पर डेटा भेज सकते हैं send() विधि, और एक से सर्वर से ब्राउज़र के लिए डेटा प्राप्त करते हैं onmessage आयोजन प्रबंधकर्ता।

निम्नलिखित API है जो एक नया WebSocket ऑब्जेक्ट बनाता है।

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

यहां पहला तर्क, यूआरएल, जो निर्दिष्ट करने के लिए URL निर्दिष्ट करता है। दूसरी विशेषता, प्रोटोकॉल वैकल्पिक है, और यदि मौजूद है, तो एक उप-प्रोटोकॉल निर्दिष्ट करता है जो सर्वर को कनेक्शन के सफल होने के लिए समर्थन करना चाहिए।

WebSocket विशेषताएँ

निम्नलिखित WebSocket ऑब्जेक्ट की विशेषता है। ऊपर बताए अनुसार हमने सॉकेट ऑब्जेक्ट बनाया है -

अनु क्रमांक। विशेषता और विवरण
1

Socket.readyState

आसानी से तैयार होने वाली विशेषता कनेक्शन की स्थिति का प्रतिनिधित्व करती है। इसके निम्न मूल्य हो सकते हैं -

  • 0 का मान इंगित करता है कि कनेक्शन अभी तक स्थापित नहीं हुआ है।

  • 1 का मान इंगित करता है कि कनेक्शन स्थापित है और संचार संभव है।

  • 2 का मान इंगित करता है कि कनेक्शन बंद हैंडशेक के माध्यम से जा रहा है।

  • 3 का मान इंगित करता है कि कनेक्शन बंद कर दिया गया है या खोला नहीं जा सकता है।
2

Socket.bufferedAmount

आसानी से बफ़र की गई विशेषता बफ़र यूएमएफ -8 पाठ के बाइट्स की संख्या का प्रतिनिधित्व करती है जिन्हें भेजने () विधि का उपयोग करके कतारबद्ध किया गया है।

WebSocket घटनाएँ

WebSocket ऑब्जेक्ट से जुड़ी घटनाएं निम्नलिखित हैं। ऊपर बताए अनुसार हमने सॉकेट ऑब्जेक्ट बनाया है -

प्रतिस्पर्धा आयोजन प्रबंधकर्ता विवरण
खुला हुआ Socket.onopen यह घटना तब होती है जब सॉकेट कनेक्शन स्थापित होता है।
संदेश Socket.onmessage यह घटना तब होती है जब क्लाइंट सर्वर से डेटा प्राप्त करता है।
त्रुटि Socket.onerror यह घटना तब होती है जब संचार में कोई त्रुटि होती है।
बंद करे Socket.onclose यह घटना तब होती है जब कनेक्शन बंद हो जाता है।

WebSocket तरीके

WebSocket ऑब्जेक्ट से जुड़े तरीके निम्नलिखित हैं। ऊपर बताए अनुसार हमने सॉकेट ऑब्जेक्ट बनाया है -

अनु क्रमांक। विधि और विवरण
1

Socket.send()

भेजने (डेटा) पद्धति कनेक्शन का उपयोग करके डेटा प्रसारित करती है।
2

Socket.close()

किसी भी मौजूदा कनेक्शन को समाप्त करने के लिए करीब () विधि का उपयोग किया जाएगा।

WebSocket उदाहरण

एक WebSocket क्लाइंट और सर्वर के बीच एक मानक द्विदिश टीसीपी सॉकेट है। सॉकेट एक HTTP कनेक्शन के रूप में शुरू होता है और फिर HTTP हैंडशेक के बाद टीसीपी सॉकेट में "अपग्रेड" होता है। हैंडशेक के बाद, दोनों तरफ डेटा भेज सकते हैं।

क्लाइंट साइड HTML और जावास्क्रिप्ट कोड

इस ट्यूटोरियल को लिखने के समय, केवल कुछ ही वेब ब्राउज़र हैं जो WebSocket () इंटरफ़ेस का समर्थन करते हैं। आप क्रोम, मोज़िला, ओपेरा और सफारी के नवीनतम संस्करण के साथ निम्नलिखित उदाहरण की कोशिश कर सकते हैं।

<!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 जो अपाचे HTTP सर्वर के लिए एक वेब सॉकेट विस्तार प्रदान करते हैं और इन चरणों का पालन इसे स्थापित करना है।

  • डाउनलोड की गई फ़ाइल को खोलना और खोलना।

  • अंदर जाओ pywebsocket-x.x.x/src/ निर्देशिका।

  • $ python setup.py बिल्ड

  • $ sudo python setup.py स्थापित

  • इसके बाद दस्तावेज़ पढ़ें -

    • $ pydoc mod_pywebsocket

यह आपके अजगर पर्यावरण में स्थापित करेगा।

सर्वर प्रारंभ करें

के पास जाओ pywebsocket-x.x.x/src/mod_pywebsocket फ़ोल्डर और निम्न कमांड चलाएँ -

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

यह पोर्ट 9998 पर सुनने वाले सर्वर को शुरू करेगा और उपयोग करेगा handlers -w विकल्प द्वारा निर्दिष्ट निर्देशिका जहां हमारा echo_wsh.py रहता है।

अब क्रोम ब्राउज़र का उपयोग करके शुरुआत में आपके द्वारा बनाई गई HTML फ़ाइल खोलें। यदि आपका ब्राउज़र WebSocket () का समर्थन करता है, तो आपको यह इंगित करने के लिए चेतावनी मिलेगी कि आपका ब्राउज़र WebSocket का समर्थन करता है और अंत में जब आप "Run WebSocket" पर क्लिक करते हैं, तो आपको सर्वर स्क्रिप्ट द्वारा भेजा गया अलविदा संदेश प्राप्त होगा।

HTML5 तत्व <कैनवास> आपको जावास्क्रिप्ट का उपयोग करके ग्राफिक्स बनाने का एक आसान और शक्तिशाली तरीका देता है। इसका उपयोग ग्राफ खींचने, फोटो रचनाएं बनाने या सरल (और इतना सरल नहीं) एनिमेशन करने के लिए किया जा सकता है।

यहां एक सरल <कैनवास> तत्व है जिसमें केवल दो विशिष्ट विशेषताएं हैं width तथा height प्लस सभी कोर HTML5 विशेषताओं जैसे आईडी, नाम और वर्ग, आदि।

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

आप आसानी से पा सकते हैं कि <कैनवास> DOM में तत्व getElementById () विधि निम्नानुसार है -

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

एचटीएमएल 5 दस्तावेज़ में <कैनवास> तत्व का उपयोग करने पर एक सरल उदाहरण देखें।

<!DOCTYPE HTML>

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

यह निम्नलिखित परिणाम का उत्पादन करेगा -

प्रतिपादन प्रसंग

<कैनवास> शुरू में रिक्त है, और कुछ प्रदर्शित करने के लिए, एक स्क्रिप्ट को पहले प्रतिपादन संदर्भ तक पहुंचने और उस पर आकर्षित करने की आवश्यकता है।

कैनवास तत्व में एक DOM विधि होती है जिसे कहा जाता है getContext, प्रतिपादन संदर्भ और उसके ड्राइंग कार्यों को प्राप्त करने के लिए उपयोग किया जाता है। यह फ़ंक्शन एक पैरामीटर लेता है, संदर्भ का प्रकार2d।

यदि आपका ब्राउज़र <कैनवास> तत्व का समर्थन करता है, तो चेक के साथ आवश्यक संदर्भ प्राप्त करने के लिए कोड निम्नलिखित है -

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

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

ब्राउज़र का समर्थन

फ़ायरफ़ॉक्स, सफारी, क्रोम और ओपेरा के नवीनतम संस्करण एचटीएमएल 5 कैनवस के लिए सभी समर्थन करते हैं, लेकिन IE8 मूल रूप से कैनवास का समर्थन नहीं करता है।

Internet Explorer के माध्यम से कैनवास का समर्थन करने के लिए आप ExplorerCanvas का उपयोग कर सकते हैं । आपको इस जावास्क्रिप्ट को इस प्रकार शामिल करना होगा -

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

एचटीएमएल 5 कैनवस उदाहरण

यह ट्यूटोरियल HTML5 <कैनवास> तत्व से संबंधित निम्नलिखित उदाहरणों को शामिल करता है।

अनु क्रमांक। उदाहरण और विवरण
1 रेक्टैंगल्स ड्राइंग

HTML5 <कैनवास> तत्व का उपयोग करके आयत बनाने का तरीका जानें
2 ड्राइंग पथ

एचटीएमएल 5 <कैनवास> तत्व में पथों का उपयोग करके आकार बनाना सीखें

3 रेखाएँ खींचना

एचटीएमएल 5 <कैनवास> तत्व का उपयोग करके लाइनें आकर्षित करना सीखें
4 ड्राइंग बेज़ियर

एचटीएमएल 5 <कैनवास> तत्व का उपयोग करके बेजियर कर्व को आकर्षित करना सीखें
5 चतुर्भुज आरेखित करना

HTML5 <कैनवास> तत्व का उपयोग करके द्विघात वक्र आकर्षित करना सीखें
6 छवियों का उपयोग करना

एचटीएमएल 5 <कैनवास> तत्व के साथ छवियों का उपयोग करना सीखें
7 ग्रेड बनाएं

एचटीएमएल 5 <कैनवास> तत्व का उपयोग करके ग्रेडिएंट बनाने का तरीका जानें
8 शैलियाँ और रंग

HTML5 <कैनवास> तत्व का उपयोग करके शैलियों और रंगों को लागू करना सीखें
9 पाठ और फ़ॉन्ट्स

विभिन्न फ़ॉन्ट और उनके आकार का उपयोग करके अद्भुत पाठ आकर्षित करना सीखें।
10 पैटर्न और छाया

जानें कि विभिन्न पैटर्न कैसे बनाएं और छाया को कैसे छोड़ें।
1 1 कैनवस स्टेट्स

एक कैनवास पर जटिल चित्र बनाते समय कैनवास को बचाने और पुनर्स्थापित करने का तरीका जानें।
12 कैनवास अनुवाद

इस विधि का उपयोग कैनवास और उसके मूल को ग्रिड में एक अलग बिंदु पर ले जाने के लिए किया जाता है।
13 कैनवस रोटेशन

इस पद्धति का उपयोग वर्तमान मूल के चारों ओर कैनवास को घुमाने के लिए किया जाता है।
14 कैनवस स्केलिंग

इस पद्धति का उपयोग कैनवास ग्रिड में इकाइयों को बढ़ाने या घटाने के लिए किया जाता है।
15 कैनवस ट्रांसफ़ॉर्म

ये विधियां रूपांतरण मैट्रिक्स में सीधे संशोधन की अनुमति देती हैं।
16 कैनवास रचना

इस पद्धति का उपयोग कैनवास से कुछ क्षेत्रों या स्पष्ट वर्गों को बंद करने के लिए किया जाता है।
17 कैनवास एनीमेशन

HTML5 कैनवास और जावास्क्रिप्ट का उपयोग करके बुनियादी एनीमेशन बनाने का तरीका जानें।

HTML5 की विशेषताओं में फ्लैश की आवश्यकता के बिना देशी ऑडियो और वीडियो समर्थन शामिल हैं।

एचटीएमएल 5 <ऑडियो> और <वीडियो> टैग मीडिया को वेबसाइट पर जोड़ना सरल बनाते हैं। आपको सेट करने की आवश्यकता हैsrc मीडिया स्रोत की पहचान करने के लिए विशेषता और एक नियंत्रण विशेषता शामिल है ताकि उपयोगकर्ता मीडिया को चला सके और रोक सके।

वीडियो एम्बेड करना

यहां आपके वेबपृष्ठ में वीडियो फ़ाइल एम्बेड करने का सबसे सरल रूप है -

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

वर्तमान एचटीएमएल 5 ड्राफ्ट विनिर्देश निर्दिष्ट नहीं करता है कि वीडियो टैग ब्राउज़र को वीडियो टैग में किसका समर्थन करना चाहिए। लेकिन सबसे अधिक उपयोग किए जाने वाले वीडियो प्रारूप हैं -

  • Ogg - थेडोरा वीडियो कोडेक और वोरबिस ऑडियो कोडेक के साथ ऑग फाइलें।

  • mpeg4 - H464 वीडियो कोडेक और AAC ऑडियो कोडेक के साथ MPEG4 फाइलें।

आप मीडिया प्रकार और कई अन्य विशेषताओं के साथ मीडिया को निर्दिष्ट करने के लिए <स्रोत> टैग का उपयोग कर सकते हैं। एक वीडियो तत्व कई स्रोत तत्वों और ब्राउज़र को पहले मान्यता प्राप्त प्रारूप का उपयोग करने की अनुमति देता है -

<!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

यह विशेषता सीएसएस पिक्सल में वीडियो के प्रदर्शन क्षेत्र की ऊंचाई को निर्दिष्ट करती है।
5

loop

निर्दिष्ट होने पर यह बूलियन विशेषता वीडियो को अंत में पहुंचने के बाद स्वचालित रूप से वापस शुरू करने की अनुमति देगा।
6

preload

यह विशेषता निर्दिष्ट करती है कि वीडियो को पेज लोड पर लोड किया जाएगा, और चलाने के लिए तैयार किया जाएगा। अगर ऑटोप्ले मौजूद है तो नजरअंदाज कर दिया।
7

poster

यह एक छवि का URL है, जब तक कि उपयोगकर्ता खेलता या दिखाता नहीं है।
8

src

एम्बेड करने के लिए वीडियो का URL। यह वैकल्पिक है; वीडियो को एम्बेड करने के लिए निर्दिष्ट करने के लिए आप वीडियो ब्लॉक के भीतर <स्रोत> तत्व का उपयोग कर सकते हैं।
9

width

यह विशेषता CSS पिक्सेल में वीडियो के डिस्प्ले क्षेत्र की चौड़ाई को निर्दिष्ट करती है।

ऑडियो एम्बेड करना

एचटीएमएल 5 <ऑडियो> टैग का समर्थन करता है जिसका उपयोग 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। यह वैकल्पिक है; वीडियो को एम्बेड करने के लिए निर्दिष्ट करने के लिए आप वीडियो ब्लॉक के भीतर <स्रोत> तत्व का उपयोग कर सकते हैं।

मीडिया इवेंट्स को हैंडल करना

HTML5 ऑडियो और वीडियो टैग में जावास्क्रिप्ट का उपयोग करके नियंत्रण की विभिन्न कार्यात्मकताओं को नियंत्रित करने के लिए कई विशेषताएं हो सकती हैं -

क्र.सं. घटना विवरण
1

abort

प्लेबैक समाप्त होने पर यह ईवेंट उत्पन्न होता है।
2

canplay

यह घटना तब उत्पन्न होती है जब पर्याप्त डेटा उपलब्ध होता है जिसे मीडिया चलाया जा सकता है।
3

ended

प्लेबैक पूरा होने पर यह घटना उत्पन्न होती है।
4

error

यह ईवेंट तब उत्पन्न होता है जब कोई त्रुटि होती है।
5

loadeddata

यह घटना तब उत्पन्न होती है जब मीडिया के पहले फ्रेम ने लोडिंग समाप्त कर दी है।
6

loadstart

यह घटना मीडिया के लोडिंग शुरू होने पर उत्पन्न होती है।
7

pause

यह घटना प्लेबैक उत्पन्न होने पर उत्पन्न होती है।
8

play

यह घटना प्लेबैक शुरू होने या फिर से शुरू होने पर उत्पन्न होती है।
9

progress

यह घटना मीडिया को डाउनलोड करने की प्रगति को सूचित करने के लिए समय-समय पर उत्पन्न होती है।
10

ratechange

प्लेबैक गति में परिवर्तन होने पर यह घटना उत्पन्न होती है।
1 1

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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

मीडिया प्रकार के लिए सर्वर कॉन्फ़िगर करना

अधिकांश सर्वर डिफ़ॉल्ट MIME प्रकार के साथ डिफ़ॉल्ट रूप से Ogg या mp4 मीडिया की सेवा नहीं करते हैं, इसलिए आपको इसके लिए उपयुक्त कॉन्फ़िगरेशन जोड़ने की आवश्यकता होगी।

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

HTML5 जियोलोकेशन एपीआई आपको अपने पसंदीदा वेब साइटों के साथ अपना स्थान साझा करने देता है। एक जावास्क्रिप्ट आपके अक्षांश और देशांतर पर कब्जा कर सकता है और इसे वेब सर्वर को बैकेंड करने और स्थानीय व्यापार खोजने या मानचित्र पर अपना स्थान दिखाने जैसी फैंसी स्थान-जागरूक चीजें करने के लिए भेजा जा सकता है।

आज अधिकांश ब्राउज़र और मोबाइल डिवाइस जियोलोकेशन एपीआई का समर्थन करते हैं। जियोलोकेशन एपीआई वैश्विक नेविगेटर ऑब्जेक्ट यानी की एक नई संपत्ति के साथ काम करते हैं। जियोलोकेशन ऑब्जेक्ट जो निम्नानुसार बनाया जा सकता है -

var geolocation = navigator.geolocation;

जियोलोकेशन ऑब्जेक्ट एक सेवा ऑब्जेक्ट है जो विजेट को डिवाइस की भौगोलिक स्थिति के बारे में जानकारी प्राप्त करने की अनुमति देता है।

जियोलोकेशन के तरीके

जियोलोकेशन ऑब्जेक्ट निम्नलिखित तरीके प्रदान करता है -

अनु क्रमांक। विधि और विवरण
1 getCurrentPosition ()

यह विधि उपयोगकर्ता की वर्तमान भौगोलिक स्थिति को पुनः प्राप्त करती है।
2 watchPosition ()

यह विधि डिवाइस की वर्तमान भौगोलिक स्थिति के बारे में आवधिक अपडेट प्राप्त करती है।
3 clearWatch ()

यह विधि किसी चल रहे वॉचपॉइंट कॉल को रद्द कर देती है।

उदाहरण

उपरोक्त विधि का उपयोग करने के लिए एक नमूना कोड निम्नलिखित है -

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

यहाँ showLocation और errorHandler कॉलबैक विधियाँ हैं जिनका उपयोग अगले भाग में बताई गई वास्तविक स्थिति को प्राप्त करने और यदि कोई है तो त्रुटियों को संभालने के लिए किया जाएगा।

स्थान के गुण

जियोलोकेशन तरीके getCurrentPosition () और getPositionUsingMethodName () स्थान जानकारी को पुनर्प्राप्त करने वाली कॉलबैक विधि को निर्दिष्ट करते हैं। इन विधियों को किसी वस्तु के साथ अतुल्यकालिक रूप से कहा जाता हैPosition जो संपूर्ण स्थान की जानकारी संग्रहीत करता है।

Positionऑब्जेक्ट डिवाइस की वर्तमान भौगोलिक स्थिति को निर्दिष्ट करता है। शीर्षक और गति के बारे में जानकारी के साथ स्थान को भौगोलिक निर्देशांक के एक सेट के रूप में व्यक्त किया गया है।

निम्न तालिका स्थिति ऑब्जेक्ट के गुणों का वर्णन करती है। वैकल्पिक गुणों के लिए यदि सिस्टम एक मूल्य प्रदान नहीं कर सकता है, तो संपत्ति का मूल्य शून्य पर सेट है।

संपत्ति प्रकार विवरण
coords वस्तुओं डिवाइस की भौगोलिक स्थिति को निर्दिष्ट करता है। शीर्षक और गति के बारे में जानकारी के साथ स्थान को भौगोलिक निर्देशांक के एक सेट के रूप में व्यक्त किया गया है।
coords.latitude संख्या दशमलव डिग्री में अक्षांश अनुमान निर्दिष्ट करता है। मान श्रेणी [-90.00, +90.00] है।
coords.longitude संख्या दशमलव डिग्री में देशांतर अनुमान को निर्दिष्ट करता है। मान श्रेणी [-180.00, +180.00] है।
coords.altitude संख्या [वैकल्पिक] WGS 84 दीर्घवृत्त से ऊपर मीटर में ऊंचाई का अनुमान निर्दिष्ट करता है।
coords.accuracy संख्या [वैकल्पिक] मीटर में अक्षांश और देशांतर अनुमानों की सटीकता को निर्दिष्ट करता है।
coords.altitudeAccuracy संख्या [वैकल्पिक] मीटर में ऊंचाई के अनुमान की सटीकता को निर्दिष्ट करता है।
coords.heading संख्या [वैकल्पिक] सही उत्तर के सापेक्ष घड़ी की दिशा में डिग्री में आंदोलन की वर्तमान दिशा को निर्दिष्ट करता है।
coords.speed संख्या [वैकल्पिक] मीटर में डिवाइस की वर्तमान जमीन की गति प्रति सेकंड निर्दिष्ट करता है।
TIMESTAMP दिनांक उस समय को निर्दिष्ट करता है जब स्थान की जानकारी पुनर्प्राप्त की गई थी और स्थिति ऑब्जेक्ट बनाया गया था।

उदाहरण

निम्नलिखित एक नमूना कोड है जो स्थिति ऑब्जेक्ट का उपयोग करता है। यहाँ showLocation विधि एक कॉलबैक विधि है -

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

त्रुटियों को संभालना

जियोलोकेशन जटिल है, और किसी भी त्रुटि को पकड़ने और इसे इनायत से संभालने के लिए बहुत आवश्यक है।

जियोलोकेशन तरीके getCurrentPosition () और वॉचपोजिशन () एक त्रुटि हैंडलर कॉलबैक विधि का उपयोग करते हैं जो देता है PositionErrorवस्तु। इस वस्तु के दो गुण हैं -

संपत्ति प्रकार विवरण
कोड संख्या त्रुटि के लिए एक संख्यात्मक कोड होता है।
संदेश तार इसमें त्रुटि का मानव-पठनीय वर्णन है।

निम्न तालिका स्थितिError ऑब्जेक्ट में दिए गए संभावित त्रुटि कोड का वर्णन करती है।

कोड स्थिर विवरण
0 अज्ञात त्रुटि अज्ञात त्रुटि के कारण उपकरण का स्थान पुनर्प्राप्त करने में विधि विफल रही।
1 अनुमति नहीं मिली उपकरण के स्थान को पुनः प्राप्त करने में विधि विफल रही क्योंकि एप्लिकेशन के पास स्थान सेवा का उपयोग करने की अनुमति नहीं है।
2 POSITION_UNAVAILABLE डिवाइस का स्थान निर्धारित नहीं किया जा सका।
3 समय समाप्त विधि निर्दिष्ट अधिकतम टाइमआउट अंतराल के भीतर स्थान की जानकारी को पुनः प्राप्त करने में असमर्थ थी।

उदाहरण

निम्नलिखित एक नमूना कोड है जो स्थितिError ऑब्जेक्ट का उपयोग करता है। यहाँ 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});
}

माइक्रोडाटा आपके वेब पेजों में अतिरिक्त शब्दार्थ प्रदान करने का एक मानकीकृत तरीका है।

माइक्रोडाटा आपको अपने स्वयं के अनुकूलित तत्वों को परिभाषित करने और अपने वेब पृष्ठों में कस्टम गुणों को एम्बेड करने की सुविधा देता है। उच्च स्तर पर, माइक्रोडाटा में नाम-मूल्य जोड़े का एक समूह होता है।

समूह कहलाते हैं items, और प्रत्येक नाम-मूल्य जोड़ी एक है 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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

गुणों में आम तौर पर मूल्य होते हैं जो तार होते हैं लेकिन इसके निम्न प्रकार हो सकते हैं -

वैश्विक गुण

माइक्रोडाटा पांच वैश्विक विशेषताओं का परिचय देता है जो आपके डेटा के बारे में मशीनों के उपयोग और संदर्भ के लिए किसी भी तत्व के लिए उपलब्ध होगा।

अनु क्रमांक। विशेषता और विवरण
1

itemscope

इसका उपयोग आइटम बनाने के लिए किया जाता है। आइटमस्कोप विशेषता एक बूलियन विशेषता है जो बताती है कि इस पृष्ठ पर माइक्रोडाटा है, और यह वह जगह है जहां यह शुरू होता है।
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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

प्रॉपर्टी घोषित करने वाले तत्व पर आइटमस्कोप विशेषता डालकर गुण स्वयं भी नाम-मूल्य जोड़े के समूह हो सकते हैं।

माइक्रोडाटा एपीआई समर्थन

यदि कोई ब्राउज़र HTML5 माइक्रोडाटा एपीआई का समर्थन करता है, तो वैश्विक दस्तावेज़ ऑब्जेक्ट पर एक getItems () फ़ंक्शन होगा। यदि ब्राउज़र माइक्रोडाटा का समर्थन नहीं करता है, तो GetItems () फ़ंक्शन अपरिभाषित हो जाएगा।

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

माडर्निज़र अभी तक माइक्रोडाटा एपीआई के लिए जाँच का समर्थन नहीं करता है, इसलिए आपको ऊपर सूचीबद्ध की तरह फ़ंक्शन का उपयोग करना होगा।

HTML5 माइक्रोडेटा मानक में HTML मार्कअप (मुख्य रूप से खोज इंजन के लिए) और DOM फ़ंक्शंस का एक सेट (मुख्य रूप से ब्राउज़र के लिए) शामिल हैं।

आप अपने वेब पेजों में माइक्रोडाटा मार्कअप को शामिल कर सकते हैं, और खोज इंजन जो कि माइक्रोडाटा विशेषताओं को नहीं समझते हैं, बस उन्हें अनदेखा कर देंगे। लेकिन अगर आपको DOM के माध्यम से माइक्रोडेटा को एक्सेस या हेरफेर करने की आवश्यकता है, तो आपको यह जांचना होगा कि ब्राउज़र माइक्रोडाटा DOM API का समर्थन करता है या नहीं।

माइक्रोडाटा शब्दावली को परिभाषित करना

माइक्रोडाटा शब्दावली को परिभाषित करने के लिए आपको एक नामस्थान URL की आवश्यकता होती है जो एक कार्यशील वेब पेज की ओर इशारा करता है। उदाहरण के लिए https://data-vocabulary.org/Person को निम्नलिखित गुणों के साथ एक व्यक्तिगत माइक्रोडेटा शब्दावली के लिए नामस्थान के रूप में इस्तेमाल किया जा सकता है -

  • name - एक साधारण स्ट्रिंग के रूप में व्यक्ति का नाम

  • Photo - व्यक्ति की तस्वीर के लिए एक URL।

  • URL - व्यक्ति से संबंधित वेबसाइट।

एक व्यक्ति के बारे में गुणों का उपयोग करके माइक्रोडाटा निम्नानुसार हो सकता है -

<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 अपने अमीर स्निपेट्स कार्यक्रम के हिस्से के रूप में माइक्रोडाटा का समर्थन करता है। जब Google का वेब क्रॉलर आपके पेज को पार्स करता है और माइक्रोडेटा गुण पाता है जो http://datavocabulary.org/Person शब्दावली के अनुरूप है, यह उन गुणों को पार्स करता है और बाकी पेज डेटा के साथ उन्हें संग्रहीत करता है।

आप http://www.tutorialspoint.com/html5/microdata.htm का उपयोग करके रिच स्निपेट्स टेस्टिंग टूल का उपयोग करके उपरोक्त उदाहरण का परीक्षण कर सकते हैं

माइक्रोडाटा पर आगे के विकास के लिए आप हमेशा HTML5 माइक्रोडाटा का उल्लेख कर सकते हैं ।

ड्रैग एंड ड्रॉप (डीएनडी) शक्तिशाली यूजर इंटरफेस अवधारणा है जो माउस क्लिक की मदद से वस्तुओं की प्रतिलिपि बनाना, पुन: व्यवस्थित करना और हटाना आसान बनाता है। यह उपयोगकर्ता को किसी तत्व पर माउस बटन को क्लिक करने और होल्ड करने की अनुमति देता है, इसे किसी अन्य स्थान पर खींचें और तत्व को छोड़ने के लिए माउस बटन को छोड़ दें।

पारंपरिक एचटीएमएल 4 के साथ ड्रैग और ड्रॉप फंक्शनलिटी हासिल करने के लिए, डेवलपर्स को या तो जटिल जावास्क्रिप्ट प्रोग्रामिंग या अन्य जावास्क्रिप्ट चौखटे जैसे जेबीआर आदि का उपयोग करना होगा।

अब एचटीएमएल 5 एक ड्रैग एंड ड्रॉप (डीएनडी) एपीआई के साथ आया है जो ब्राउज़र में देशी डीएनडी समर्थन लाता है जिससे इसे कोड करना बहुत आसान हो जाता है।

HTML 5 DnD को सभी प्रमुख ब्राउज़रों जैसे क्रोम, फ़ायरफ़ॉक्स 3.5 और सफारी 4 आदि द्वारा समर्थित किया गया है।

ड्रैग एंड ड्रॉप इवेंट्स

ऐसे कई ईवेंट हैं, जिन्हें ड्रैग एंड ड्रॉप ऑपरेशन के विभिन्न चरणों के दौरान निकाल दिया जाता है। इन घटनाओं को नीचे सूचीबद्ध किया गया है -

अनु क्रमांक। घटनाक्रम और विवरण
1

dragstart

जब उपयोगकर्ता ऑब्जेक्ट को खींचना शुरू करता है तो आग लग जाती है।
2

dragenter

जब ड्रैग हो रहा हो तब माउस को पहली बार लक्ष्य तत्व पर ले जाया जाता है। इस घटना के लिए एक श्रोता को इंगित करना चाहिए कि क्या इस स्थान पर एक बूंद की अनुमति है। यदि कोई श्रोता नहीं हैं, या श्रोता कोई कार्य नहीं करते हैं, तो डिफ़ॉल्ट रूप से एक बूंद की अनुमति नहीं है।
3

dragover

इस घटना को निकाल दिया जाता है क्योंकि जब कोई ड्रैग हो रहा होता है तो माउस को एक तत्व के ऊपर ले जाया जाता है। ज्यादातर समय, एक श्रोता के दौरान होने वाला ऑपरेशन ड्रैगेंटर घटना के समान होगा।
4

dragleave

इस घटना को निकाल दिया जाता है जब माउस एक तत्व छोड़ता है जबकि एक ड्रैग हो रहा है। श्रोताओं को ड्रॉप फीडबैक के लिए उपयोग किए जाने वाले किसी भी हाइलाइटिंग या सम्मिलन मार्कर को हटा देना चाहिए।
5

drag

हर बार माउस ले जाया जाता है, जबकि ऑब्जेक्ट को खींचा जा रहा है।
6

drop

ड्रॉप इवेंट को उस तत्व पर निकाल दिया जाता है जहां ड्रैग ऑपरेशन के अंत में ड्रॉप हुआ था। एक श्रोता को ड्रॉप स्थान पर डेटा को खींचने और उसे सम्मिलित करने के लिए जिम्मेदार होगा।
7

dragend

जब उपयोगकर्ता किसी ऑब्जेक्ट को खींचते समय माउस बटन छोड़ता है तो आग लग जाती है।

Note- ध्यान दें कि केवल ड्रैग घटनाओं को निकाल दिया जाता है; माउस घटनाओं जैसे कि मूसमोव को एक ड्रैग ऑपरेशन के दौरान निकाल नहीं दिया जाता है।

डेटाट्रांसफर ऑब्जेक्ट

सभी ड्रैग और ड्रॉप इवेंट के लिए ईवेंट श्रोता तरीके स्वीकार करते हैं 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 उन प्रारूपों को सूचीबद्ध करता है जो ड्रैगस्टार्ट ईवेंट में सेट किए गए थे। इसके अलावा, यदि किसी भी फाइल को खींचा जा रहा है, तो एक प्रकार स्ट्रिंग "फाइलें" होगी।
4

dataTransfer.clearData ( [ format ] )

निर्दिष्ट स्वरूपों का डेटा निकालता है। यदि तर्क छोड़ दिया गया है तो सभी डेटा निकालता है।
5

dataTransfer.setData(format, data)

निर्दिष्ट डेटा जोड़ता है।
6

data = dataTransfer.getData(format)

निर्दिष्ट डेटा लौटाता है। यदि ऐसा कोई डेटा नहीं है, तो खाली स्ट्रिंग लौटाता है।
7

dataTransfer.files

यदि कोई हो, तो फाइल के एक फाइललिस्ट को खींचा जाता है।
8

dataTransfer.setDragImage(element, x, y)

दिए गए तत्व का उपयोग ड्रैग फीडबैक को अद्यतन करने के लिए करता है, किसी भी पहले निर्दिष्ट फीडबैक को बदलने के लिए।
9

dataTransfer.addElement(element)

ड्रैग फीडबैक को रेंडर करने के लिए उपयोग किए गए तत्वों की सूची में दिए गए तत्व को जोड़ता है।

ड्रैग एंड ड्रॉप प्रोसेस

ड्रैग एंड ड्रॉप ऑपरेशन को लागू करने के लिए निम्नलिखित कदम उठाए गए हैं -

चरण 1 - एक वस्तु को खींचने योग्य बनाना

यहां उठाए जाने वाले कदम हैं -

  • यदि आप किसी तत्व को खींचना चाहते हैं, तो आपको सेट करने की आवश्यकता है 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ईवेंट, जिसका उपयोग यह निर्धारित करने के लिए किया जाता है कि उपयोगकर्ता को क्या फ़ीडबैक दिखाया जाना है। यदि ईवेंट को रद्द कर दिया गया है, तो फीडबैक (आमतौर पर कर्सर) को ड्रॉपऑफक्ट विशेषता के मूल्य के आधार पर अपडेट किया जाता है।

  • अंततः 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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

जावास्क्रिप्ट को एक एकल-थ्रेडेड वातावरण में चलाने के लिए डिज़ाइन किया गया था, जिसका अर्थ है कि एक ही समय में कई स्क्रिप्ट नहीं चल सकते हैं। ऐसी स्थिति पर विचार करें जहां आपको UI ईवेंट्स को संभालने, एपीआई डेटा की बड़ी मात्रा को संसाधित करने और डोम में हेरफेर करने की आवश्यकता होती है।

जावास्क्रिप्ट आपके ब्राउज़र को उस स्थिति में लटका देगा जहां सीपीयू का उपयोग अधिक है। आइए एक सरल उदाहरण लेते हैं जहां जावास्क्रिप्ट एक बड़े लूप से गुजरता है -

<!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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

जब आप बिग लूप बटन पर क्लिक करते हैं तो यह फ़ायरफ़ॉक्स में निम्न परिणाम दिखाता है -

वेब वर्कर्स क्या है?

ऊपर वर्णित स्थिति का उपयोग करके नियंत्रित किया जा सकता है Web Workers उपयोगकर्ता इंटरफ़ेस को बाधित किए बिना सभी कम्प्यूटेशनल रूप से महंगे कार्यों को कौन करेगा और आम तौर पर अलग थ्रेड पर चलता है।

वेब वर्कर्स लंबे समय तक चलने वाली स्क्रिप्ट्स की अनुमति देते हैं जो उन स्क्रिप्ट्स से बाधित नहीं होती हैं जो क्लिक्स या अन्य उपयोगकर्ता इंटरैक्शन का जवाब देती हैं, और पेज को उत्तरदायी बनाए रखने के लिए लंबे समय तक कार्य को बिना पैदावार के निष्पादित करने की अनुमति देती हैं।

वेब वर्कर्स बैकग्राउंड स्क्रिप्ट होते हैं और वे अपेक्षाकृत भारी होते हैं, और बड़ी संख्या में उपयोग किए जाने का इरादा नहीं है। उदाहरण के लिए, चार मेगापिक्सेल छवि के प्रत्येक पिक्सेल के लिए एक कार्यकर्ता को लॉन्च करना अनुचित होगा।

जब कोई स्क्रिप्ट किसी वेब वर्कर के अंदर निष्पादित हो रही होती है, तो वह वेब पेज की विंडो ऑब्जेक्ट (window.document) तक नहीं पहुंच सकती है, जिसका अर्थ है कि वेब वर्कर्स का वेब पेज और DOM API तक सीधी पहुंच नहीं है। हालांकि वेब वर्कर्स ब्राउज़र UI को ब्लॉक नहीं कर सकते हैं, फिर भी वे सीपीयू साइकिल का उपभोग कर सकते हैं और सिस्टम को कम उत्तरदायी बना सकते हैं।

वेब वर्कर्स कैसे काम करते हैं?

वेब वर्कर्स को एक जावास्क्रिप्ट फाइल के यूआरएल के साथ आरंभीकृत किया जाता है, जिसमें वह कोड होता है जिसे कार्यकर्ता निष्पादित करेगा। यह कोड ईवेंट श्रोताओं को सेट करता है और स्क्रिप्ट के साथ संवाद करता है जो इसे मुख्य पृष्ठ से हटाता है। निम्नलिखित सरल वाक्य रचना है -

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

यदि निर्दिष्ट जावास्क्रिप्ट फ़ाइल मौजूद है, तो ब्राउज़र एक नया वर्कर थ्रेड स्पॉन करेगा, जिसे एसिंक्रोनस रूप से डाउनलोड किया गया है। यदि आपके कार्यकर्ता का पथ 404 त्रुटि देता है, तो कार्यकर्ता चुपचाप विफल हो जाएगा।

यदि आपके एप्लिकेशन में जावास्क्रिप्ट फ़ाइलों का समर्थन करने वाले कई हैं, तो आप उन्हें आयात कर सकते हैं importScripts() विधि जो फ़ाइल नाम को तर्कों के रूप में अल्पविराम द्वारा अलग करती है -

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

एक बार वेब वर्कर के आने के बाद, वेब वर्कर और उसके मूल पृष्ठ के बीच संचार का उपयोग किया जाता है postMessage()तरीका। आपके ब्राउज़र / संस्करण के आधार पर, पोस्टमैसेज () या तो एक स्ट्रिंग या JSON ऑब्जेक्ट को अपने एकल तर्क के रूप में स्वीकार कर सकता है।

वेब वर्कर द्वारा पारित संदेश का उपयोग करके पहुँचा जाता है onmessageमुख्य पृष्ठ में घटना। अब वेब वर्कर का उपयोग करते हुए अपना बिग-लूप उदाहरण लिखते हैं। नीचे मुख्य पृष्ठ (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() एपीआई वापस मुख्य पृष्ठ पर संचार पास करने के लिए -

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

यह निम्नलिखित परिणाम का उत्पादन करेगा -

वेब वर्कर्स को रोकना

वेब वर्कर्स अपने आप को रोक नहीं पाते हैं लेकिन जिस पेज ने उन्हें शुरू किया है उसे कॉल करके रोक सकते हैं terminate() तरीका।

worker.terminate();

एक समाप्त वेब वर्कर अब संदेशों का जवाब नहीं देगा या कोई अतिरिक्त गणना नहीं करेगा। आप एक कार्यकर्ता को पुनः आरंभ नहीं कर सकते; इसके बजाय, आप उसी URL का उपयोग करके एक नया कार्यकर्ता बना सकते हैं।

त्रुटियों को संभालना

निम्न वेब वर्कर जावास्क्रिप्ट फ़ाइल में एरर हैंडलिंग फंक्शन का एक उदाहरण दिखाता है जो कंसोल में त्रुटियों को लॉग करता है। त्रुटि हैंडलिंग कोड के साथ, उपरोक्त उदाहरण निम्नानुसार होगा -

<!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>

ब्राउज़र समर्थन के लिए जाँच की जा रही है

ब्राउज़र में उपलब्ध वेब वर्कर फ़ीचर सपोर्ट का पता लगाने के लिए सिंटैक्स निम्नलिखित है -

<!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>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

इंडेक्सडब एक नई एचटीएमएल 5 अवधारणा है जो उपयोगकर्ता के ब्राउज़र के अंदर डेटा को स्टोर करने के लिए है। अनुक्रमित स्थानीय भंडारण की तुलना में अधिक शक्ति है और उन अनुप्रयोगों के लिए उपयोगी है जिनके लिए बड़ी मात्रा में डेटा संग्रहीत करने की आवश्यकता होती है। ये एप्लिकेशन अधिक दक्षता से चल सकते हैं और तेजी से लोड हो सकते हैं।

Indexeddb का उपयोग क्यों करें?

W3C ने घोषणा की है कि वेब एसक्यूएल डेटाबेस एक डिप्रेक्टेड लोकल स्टोरेज स्पेसिफिकेशन है, इसलिए वेब डेवलपर को इस तकनीक का उपयोग नहीं करना चाहिए। अनुक्रमित वेब SQL डेटा बेस के लिए एक विकल्प है और पुरानी तकनीकों की तुलना में अधिक प्रभावी है।

विशेषताएं

  • यह कुंजी-जोड़ी मूल्यों को संग्रहीत करता है
  • यह एक संबंधपरक डेटाबेस नहीं है
  • IndexedDB API ज्यादातर अतुल्यकालिक है
  • यह एक संरचित क्वेरी भाषा नहीं है
  • इसने एक ही डोमेन से डेटा एक्सेस करने का समर्थन किया है

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! ");
   }
}

डाटा लिया जा रहा है

हम प्राप्त () के साथ डेटा बेस से डेटा पुनः प्राप्त कर सकते हैं

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 या आवाज-वर्सा में रखा गया है, इस परिदृश्य में, ब्राउज़र सुरक्षा अपवाद को फेंकता है। वेब संदेश के साथ हम संदेश घटना के रूप में डेटा को पार कर सकते हैं।

संदेश घटना

संदेश ईवेंट्स क्रॉस-डॉक्यूमेंट मैसेजिंग, चैनल मैसेजिंग, सर्वर-सेंड इवेंट्स और वेब सॉकेट्स। यह मैसेज इवेंट इंटरफेस द्वारा वर्णित किया गया है।

गुण

अनु क्रमांक। विशेषताएँ और विवरण
1

data

स्ट्रिंग डेटा शामिल है
2

origin

डोमेन नाम और पोर्ट समाहित करता है
3

lastEventId

वर्तमान संदेश घटना के लिए अद्वितीय पहचानकर्ता शामिल है।
4

source

मूल दस्तावेज़ की विंडो में A संदर्भ शामिल है
5

ports

इसमें वह डेटा है जो किसी भी संदेश पोर्ट द्वारा भेजा गया है

एक क्रॉस-दस्तावेज़ संदेश भेजना

क्रॉस डॉक्यूमेंट मैसेज भेजने से पहले, हमें नए iframe या नई विंडो बनाकर एक नया वेब ब्राउज़िंग संदर्भ बनाने की आवश्यकता है। हम पोस्टमासेज () का उपयोग करके डेटा भेज सकते हैं और इसके दो तर्क हैं। वे इस प्रकार हैं -

  • 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 अनुरोध करना

यहां क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी सभी XMLHttprequest2 ऑब्जेक्ट का उपयोग करते हैं और इंटरनेट एक्सप्लोरर समान 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!');
};

हैंडलर के साथ कोर का उदाहरण

नीचे दिए गए उदाहरण मेकसॉरसपेस्ट () और ऑनलोड हैंडलर का उदाहरण दिखाएंगे

// 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();
}

वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा शुरू किया गया वेब आरटीसी। यह वॉयस कॉलिंग, वीडियो चैट और पी 2 पी फाइल शेयरिंग के लिए ब्राउज़र-टोबोसेर एप्लिकेशन का समर्थन करता है।

अगर आप कोशिश करना चाहते हैं? क्रोम, ओपेरा और फ़ायरफ़ॉक्स के लिए उपलब्ध वेब आरटीसी। शुरू करने के लिए एक अच्छी जगह यहाँ पर सरल वीडियो चैट अनुप्रयोग है । वेब आरटीसी तीन एपीआई को नीचे दिखाए अनुसार लागू करता है -

  • MediaStream - उपयोगकर्ता के कैमरे और माइक्रोफ़ोन तक पहुंच प्राप्त करें।

  • RTCPeerConnection - ऑडियो या वीडियो कॉलिंग की सुविधा प्राप्त करें।

  • RTCDataChannel - सहकर्मी से सहकर्मी संचार तक पहुंच प्राप्त करें।

MediaStream

MediaStream मीडिया की सिंक्रनाइज़ स्ट्रीम का प्रतिनिधित्व करता है, उदाहरण के लिए, HTML5 डेमो प्लेयर में HTML5 वीडियो प्लेयर पर क्लिक करें या फिर यहाँ क्लिक करें ।

उपरोक्त उदाहरण में stream.getAudioTracks () और stream.VideoTracks () हैं। यदि कोई ऑडियो ट्रैक नहीं है, तो यह एक खाली सरणी देता है और यह वीडियो स्ट्रीम की जांच करेगा, अगर वेबकैम जुड़ा हुआ है, स्ट्रीम .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 की आवश्यकता है। यह सुविधा अभी ओपेरा में उपलब्ध नहीं है। यहां पर नमूना डेमो उपलब्ध है

सत्र नियंत्रण, नेटवर्क और मीडिया जानकारी

वेब आरटीसी को ब्राउज़रों के बीच सहकर्मी से सहकर्मी संचार की आवश्यकता थी। इस तंत्र को सिग्नलिंग, नेटवर्क जानकारी, सत्र नियंत्रण और मीडिया जानकारी की आवश्यकता होती है। वेब डेवलपर्स SIP या XMPP या किसी भी दो तरह के संचार जैसे ब्राउज़रों के बीच संवाद करने के लिए विभिन्न तंत्र चुन सकते हैं। XHR का एक नमूना उदाहरण यहाँ है ।

नमूना बनाने का कोड कोडनैसलिंग चैनल ()

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