() translation by (you can also view the original English article)
इस ट्यूटोरियल में मैं आपको दिखाऊंगा कि कस्टम टैग्स के साथ HTML भाषा का विस्तार करना कितना आसान है। कस्टम टैग्स का उपयोग विभिन्न व्यवहारों को लागू करने के लिए किया जा सकता है, इसलिए वे कम कोड लिखने और अपने HTML डाक्यूमेंट्स को आसान बनाए रखने का एक बहुत सुविधाजनक तरीका है।
कस्टम HTML टैग क्या है?
HTML के साथ आप <b> टैग का उपयोग करते हैं, उदाहरण के लिए, बोल्ड टेक्स्ट दिखाने के लिए। यदि आपको एक लिस्ट की आवश्यकता है, तो आप <ul> टैग का उपयोग उसके <li> चाइल्ड टैग के साथ प्रत्येक लिस्ट आइटम के लिए कर सकते हैं। टैग ब्राउज़रों द्वारा व्याख्यित किए जाते हैं, और CSS के साथ, निर्धारित करते हैं कि वेबपेज कंटेंट को कैसे प्रदर्शित करता है और कंटेंट के कुछ हिस्से कैसे व्यवहार करते है।
कभी-कभी, केवल एक HTML टैग का उपयोग वेब एप्लीकेशन में आवश्यक कार्यक्षमता के लिए पर्याप्त नहीं है। आमतौर पर इसका समाधान JavaScript और CSS के साथ कई HTML टैग का उपयोग करके किया जाता है, लेकिन यह समाधान इतना एलिगेंट नहीं है।
एक और अधिक सुरुचिपूर्ण समाधान एक कस्टम टैग का उपयोग करना होगा- एक आइडेंटिफायर जो <> में संलग्न है, जिसका उद्देश्य हमारे इच्छित कार्यप्रणाली को प्रस्तुत करने के लिए ब्राउज़र द्वारा समझा जाता है। नियमित HTML टैग्स के साथ, हमे एक पेज में कई बार एक कस्टम टैग का उपयोग करने में सक्षम होना चाहिए, और हमें कस्टम टैग की कार्यक्षमता में सहायता के लिए टैग विशेषताओं और उप-टैग भी प्राप्त करने में सक्षम होना चाहिए। तो, एक उदाहरण देखें!
उदाहरण # 1: एक Gravatar कस्टम HTML टैग बनाना
चलो एक कस्टम टैग बनाएं जो एक निश्चित ईमेल एड्रेस के लिए Gravatar चित्र प्रदर्शित करेगा। हम इस टैग को <condingdude-gravatar> कॉल करेंगे, और हम ई-मेल एड्रेस को email नाम के एक एट्रिब्यूट के रूप में पास करेंगे।
आप अपने इच्छित कस्टम टैग को जो चाहे वो नाम दे सकते हैं, लेकिन एक बात ध्यान देने योग्य है कि इस उदाहरण में कस्टम टैग का नाम codingdude- से शुरू होता है। अन्य कस्टम टैग के साथ नाम के टकराव से बचने के लिए अपने कस्टम टैग के लिए इस तरह के prefixes का उपयोग करना सबसे अच्छा अभ्यास है। इसके अलावा, यह स्पष्ट रूप से एक अच्छा विचार है कि टैग नामों का उपयोग न करें जो पहले से HTML द्वारा परिभाषित किए गए हैं।
हमारे टैग को कार्यान्वित करने और जांचने के लिए, हमें कुछ चीजें बनाने की आवश्यकता होगी:
- प्रोजेक्ट फ़ाइलों को रखने के लिए एक फ़ोल्डर; चलो इस फ़ोल्डर को कॉल करें
gravatar-custom-tag। -
gravatar-custom-tagफ़ोल्डर के अंदर एक HTML फ़ाइलindex.html। इस फ़ाइल में HTML कोड शामिल होगा -
gravatar-custom-tagफ़ोल्डर के अंदर एक JS फ़ाइलcodingdude-gravatar.js। इस फ़ाइल में कस्टम टैग को कार्यान्वित करने वाला जावास्क्रिप्ट कोड होगा।
आइए index.html फ़ाइल को एडिट करें और इसकी कंटेंट इस तरह दिखें:
1 |
<html>
|
2 |
<head>
|
3 |
<script type="text/javascript" src="codingdude-gravatar.js"></script> |
4 |
</head>
|
5 |
<body>
|
6 |
This is my Gravatar picture: |
7 |
<codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar> |
8 |
</body>
|
9 |
</html>
|
अगर हम अब ब्राउज़र में index.html को लोड करते हैं, तो परिणाम उतना प्रभावशाली नहीं होगा क्योंकि हमने अभी तक हमारे कस्टम टैग के लिए कोड को कार्यान्वित नहीं किया है:
ध्यान देने योग्य बात यह है कि ब्राउज़र बहुत क्षमा करने वाला है, इसलिए आप एक दस्तावेज़ में अज्ञात टैग रख सकते हैं और ब्राउज़र उन्हें अनदेखा कर देगा। हमारे कस्टम टैग को वास्तव में मेरे ईमेल के लिए Gravatar चित्र प्रदर्शित करने के लिए, हमें पहले यह समझना होगा कि Gravatar कैसे काम करता है।
Gravatar एक ईमेल पते को एक PNG इमेज के URL में अनुवाद करके काम करता है जिसे यूजर ने चुना है अनुवाद ईमेल पते के MD5 हैश की गणना के द्वारा किया जाता है। Gravatar इमेज URL इस तरह दिखता है: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png तो पहले हमें स्ट्रिंग से MD5 हैश की गणना करने के लिए फ़ंक्शन की आवश्यकता है। इसके लिए हम एक ओपन-सोर्स लाइब्रेरी का उपयोग करेंगे जो कि हम index.html फ़ाइल में जोड़ देंगे:
1 |
<html>
|
2 |
<head>
|
3 |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script> |
4 |
<script type="text/javascript" src="codingdude-gravatar.js"></script> |
5 |
</head>
|
6 |
<body>
|
7 |
This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" /> |
8 |
</body>
|
9 |
</html>
|
अब कस्टम टैग के कार्यान्वयन पर चलते हैं। हमें उस कोड को कार्यान्वित करने की आवश्यकता होगी जो पहले दस्तावेज़ में हमारे कस्टम टैग को पहचानती है, और फिर हमें अपने कस्टम टैग की कार्यक्षमता को लागू करने की आवश्यकता है। यह सब हमारे codingdude-gravatar.js फ़ाइल में जाएंगे और यह इस तरह दिखाई देगा:
1 |
function customTag(tagName,fn){ |
2 |
document.createElement(tagName); |
3 |
//find all the tags occurrences (instances) in the document
|
4 |
var tagInstances = document.getElementsByTagName(tagName); |
5 |
//for each occurrence run the associated function
|
6 |
for ( var i = 0; i < tagInstances.length; i++) { |
7 |
fn(tagInstances[i]); |
8 |
}
|
9 |
}
|
10 |
|
11 |
function codingdudeGravatar(element){ |
12 |
//code for rendering the element goes here
|
13 |
if (element.attributes.email){ |
14 |
//get the email address from the element's email attribute
|
15 |
var email = element.attributes.email.value; |
16 |
var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png"; |
17 |
element.innerHTML = "<img src='"+gravatar+"'>"; |
18 |
}
|
19 |
}
|
20 |
|
21 |
customTag("codingdude-gravatar",codingdudeGravatar); |
कोड को देखते हुए, हम फ़ंक्शन customTag() देखते हैं जो नाम (tagName पैरामीटर) से एक कस्टम टैग की घटनाओं को पाता है और उस कस्टम टैग से संबंधित कार्यक्षमता को एक्सेक्यूट करता है (fn पैरामीटर के माध्यम से)
ब्राउज़र को सूचित करने के लिए कि हम नाम tagName के साथ एक कस्टम टैग का उपयोग करेंगे, कुछ ब्राउज़रों (IE विशेष रूप से) के लिए document.createElement(tagName) कॉल आवश्यक है, अन्यथा टैग काम नहीं करेगा।
fn पैरामीटर एक ऐसा फ़ंक्शन है जो कस्टम टैग को क्या करना है उसे करता है। हमारे मामले में, fn codingdudeGravatar() है। यह फ़ंक्शन कस्टम टैग एलिमेंट के संदर्भ में पैरामीटर के रूप में लेता है। यदि कस्टम टैग के पास एक email नाम का एट्रिब्यूट है तो वह उस मान को हमारे ओपन-सोर्स लाइब्रेरी से md5() फ़ंक्शन पर पास कर देगा। नतीजा तब होता है जब Gravatar इमेज का URL तैयार किया जाता है, जो हमारे कस्टम टैग एलिमेंट के अंदर एक <img> के माध्यम से जोड़ा जाता है।
स्क्रिप्ट की अंतिम पंक्ति को customTag() फ़ंक्शन को कस्टम टैग के नाम और इसके संबंधित कार्यान्वयन फ़ंक्शन को कॉल करती है। कस्टम टैग फ़ंक्शन को किसी भी प्रकार के कस्टम टैग के लिए पुन: उपयोग किया जा सकता है; आपको केवल उस फ़ंक्शन को कार्यान्वित करना होगा जो आपके लिए आवश्यक है।
अब, अगर हम एक ब्राउज़र में अपनी index.html फ़ाइल लोड करते हैं, तो हम अपने ईमेल के लिए Gravatar देखेंगे:
उदाहरण # 2: पाई चार्ट को ड्रा करने के लिए के लिए उन्नत कस्टम HTML टैग
हमारे पिछले उदाहरण में, हमने एक बहुत ही सरल कस्टम HTML टैग कार्यान्वयन देखा है। आप चाहते हैं कि किसी भी कस्टम टैग को लागू करने के लिए आप उसी एप्रोच का उपयोग कर सकते हैं।
देखते हैं कि एक और उन्नत कस्टम टैग कैसे कार्यान्वित किया जाए, जो कि हम एक पाय चार्ट को ड्रा करने के लिए उपयोग कर सकते हैं। इस कस्टम टैग के लिए आवश्यक फाइल बनाते हैं:
- एक फ़ोल्डर बनाएँ और इसे नाम दें
piechart-custom-tagयह हमारा प्रोजेक्ट फ़ोल्डर होगा -
piechart-custom-tagफ़ोल्डर के अंदर, एक HTML फ़ाइल बनाएं और इसेindex.htmlनाम दें। इस फ़ाइल में HTML कोड शामिल होगा। - साथ ही एक जावास्क्रिप्ट की
codingdude-piechart.jsफाइल बनाओ जिसमें हमारे कस्टम टैग के कार्यान्वयन शामिल होगा।
कस्टम टैग्स को अक्सर विभिन्न कार्यों के लिए रैपर के रूप में उपयोग किया जाता है। हमारे मामले में, हम एक पाई चार्ट ड्राइंग के लिए एक आवरण के रूप में <codingdude-piechart> टैग का उपयोग करेंगे। यदि आपने जावास्क्रिप्ट और HTML5 कैनवास का उपयोग करने के लिए चार्ट्स ड्रा कैसे करें के बारे में मेरा टुटोरिअल मिस किया है, तो आप एक क्विक झलक लेना चाह सकते हैं। हम उस ट्यूटोरियल से कोड का उपयोग करेंगे और हमारे कस्टम टैग में इसकी कार्यक्षमता को व्रैप करेंगे।
इसलिए codingdude-piechart.js फ़ाइल को एडिट करें और ट्यूटोरियल से निम्नलिखित फ़ंक्शन जोड़ें:
drawLine()drawArc()- drawPieSlice()
Piechart()
अब फ़ाइल index.html को एडिट करते हैं और कुछ इस तरह से पाइ चार्ट की ड्राइंग के लिए कस्टम टैग को रखें:
1 |
<html>
|
2 |
<head>
|
3 |
<script type="text/javascript" src="codingdude-piechart.js"></script> |
4 |
</head>
|
5 |
<body>
|
6 |
<codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88"> |
7 |
<codingdude-data category="Classical music">10</codingdude-data> |
8 |
<codingdude-data category="Alternative rock">14</codingdude-data> |
9 |
<codingdude-data category="Pop">2</codingdude-data> |
10 |
<codingdude-data category="Jazz">12</codingdude-data> |
11 |
</codingdude-piechart>
|
12 |
</body>
|
13 |
</html>
|
यहां का उद्देश्य एट्रिब्यूट की width और height का उपयोग करके पाई चार्ट की चौड़ाई और ऊंचाई निर्धारित करना है। colors ऐट्रिब्यूट्स पाई चार्ट के स्लाइस के लिए इस्तेमाल रंग सेट करता है।
जैसा कि पहले उल्लेख किया गया है, यह कस्टम टैग थोड़ा अधिक जटिल है क्योंकि हम इस कस्टम टैग के लिए उप-टैग का उपयोग करना चाहते हैं। हम चार्ट के लिए डेटा सेट करने के लिए यहां <condingdude-data> उप-टैग का उपयोग करना चाहते हैं। अब इस कस्टम टैग के लिए कोड को कार्यान्वित करने के बारे में देखें।
फ़ाइल codingdude-piechart.js में एडिट करें और, पाई चार्ट ट्यूटोरियल से ली गई फ़ंक्शन को निम्न कोड दें:
1 |
//here you should add the function from the tutorial
|
2 |
//How to Draw Charts Using JavaScript and HTML5 Canvas
|
3 |
//...
|
4 |
function customTag(tagName,fn){ |
5 |
document.createElement(tagName); |
6 |
//find all the tags occurrences (instances) in the document
|
7 |
var tagInstances = document.getElementsByTagName(tagName); |
8 |
//for each occurrence run the associated function
|
9 |
for ( var i = 0; i < tagInstances.length; i++) { |
10 |
fn(tagInstances[i]); |
11 |
}
|
12 |
}
|
13 |
|
14 |
function PiechartTag(element){ |
15 |
//add the canvas where to draw the piechart
|
16 |
var canvas = document.createElement("canvas"); |
17 |
//get the width and height from the custom tag attributes
|
18 |
canvas.width = element.attributes.width.value; |
19 |
canvas.height = element.attributes.height.value; |
20 |
element.appendChild(canvas); |
21 |
|
22 |
//get the colors for the slices from the custom tag attribute
|
23 |
var colors = element.attributes.colors.value.split(","); |
24 |
|
25 |
//load the chart data from the <codingdude-data> sub-tags
|
26 |
var chartData = {}; |
27 |
var chartDataElements = element.querySelectorAll("codingdude-data"); |
28 |
for (var i=0;i<chartDataElements.length;i++){ |
29 |
chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent); |
30 |
//remove the data sub-tags
|
31 |
chartDataElements[i].parentNode.removeChild(chartDataElements[i]); |
32 |
}
|
33 |
|
34 |
//call the draw() function
|
35 |
new Piechart( |
36 |
{
|
37 |
canvas:canvas, |
38 |
data:chartData, |
39 |
colors:colors |
40 |
}
|
41 |
).draw(); |
42 |
}
|
43 |
|
44 |
customTag("codingdude-piechart",PiechartTag); |
customTag() फ़ंक्शन उदाहरण #1 में उपयोग किए जाने वाले के समान है। PiechartTag() फ़ंक्शन में <codingdude-piechart> कस्टम टैग का कार्यान्वयन शामिल है। यह कार्य निम्नलिखित पहलुओं का ध्यान रखता है:
- यह
<canvas>एलिमेंट बनाता है जहां चार्ट तैयार किया जाएगा, और यह कस्टम टैग के अंदर इसे जोड़ता है। कैनवास की चौड़ाई और ऊंचाई को कस्टम टैग के ऐट्रिब्यूट्स से लिया जाता है। - यह एलिमेंट की
colorsएट्रिब्यूट को ढूंढता है और इसे पाइ चार्ट स्लाइस के लिए इस्तेमाल कलर्स के एक array में परिवर्तित करता है। - यह पाइ चार्ट को पास किए गए डेटा संरचना में एक-एक करके
<codingdude-data>एलिमेंट्स को लोड करता है। क्योंकि एलिमेंट्स में टेक्स्ट कंटेंट है, ब्राउज़र उन्हें रेंडर करेगा और टेक्स्ट कंटेंट दिखाए जायेंगे। चूंकि हम यह नहीं चाहते हैं, हम डेटा को प्राप्त करने के बाद एलिमेंट्स को हटा सकते हैं। - अन्त में, हम
Piechart()कंस्ट्रक्टर को आवश्यक विकल्पों के साथ कॉल करते हैं और फिर पाइ चार्ट को ड्रा करने के लिएdraw()फ़ंक्शन को कॉल करते हैं।
यदि आप index.html को लोड करते हैं, तो आप देख सकते हैं कि कस्टम टैग को पाई चार्ट के रूप में प्रस्तुत किया गया है और इसे इस तरह दिखना चाहिए:
और यह है, एक सुंदर पाई चार्ट। <codingdude-data> एट्रिब्यूट्स बदलना इसके अनुसार पाइ चार्ट को बदल देगा। यह वही कस्टम टैग तकनीक, CodeCanyon Inforgraphic Charts और Graphics HTML Tags Library के डेवलपमेंट के लिए इस्तेमाल किया गया था।
लाइब्रेरी में न केवल पाई चार्ट के लिए कस्टम टैग हैं, बल्कि लाइन चार्ट, बार चार्ट्स, और अन्य प्रकार के चार्ट्स के लिए भी शामिल है।
अंतिम विचार
इस ट्यूटोरियल में हमने दो अलग-अलग फ़ंक्शनलिटी के लिए कस्टम HTML टैग्स बनाने का दो उदाहरण देखे हैं। customTag() फ़ंक्शन का उपयोग करके, आप अपने खुद के कस्टम टैग को आसानी से विकसित कर सकते हैं।
यदि आपने इस ट्यूटोरियल का आनंद लिया, तो हमारे पास HTML5 और संबंधित प्रौद्योगिकियों (technologies) पर कई अन्य ट्यूटोरियल्स भी हैं, इसलिए साथ ही साथ, उन्हें जांचने में संकोच न करें।
