Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

जावास्क्रिप्ट और DOM सीरीज: लेसन 1

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

हैलो और जावास्क्रिप्ट प्रोग्रामिंग भाषा और DOM API के मूल पहलुओं को कवर करने वाली एक विस्तृत सीरीज के पहले भाग में आपका स्वागत है।

जबकि jQuery, Prototype और MooTools जैसे फ्रेमवर्क ब्राउज़र बग को दबाने और डेवलपमेंट को तेज करने के महान तरीके हैं, अंडरलाइंग टेक्नोलॉजीज को जानना और समझना महत्वपूर्ण है। यह सीरीज आपको यह बताने का इरादा रखती है कि आपको जावास्क्रिप्ट और डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) के बारे में क्या जानने की आवश्यकता है। यहां तक कि यदि आप किसी विशेष लाइब्रेरी का ही प्रयोग करते है तो भी आपको लाभ होगा - यह जानकर कि स्किन के नीचे कुछ कैसे काम करता है केवल एक अच्छी बात हो सकती है!

परिचय

जावास्क्रिप्ट

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

जावास्क्रिप्ट ECMAScript स्टैंडर्ड (ECMA-262) पर आधारित है और नेटस्केप के ब्रेंडन ईच द्वारा बनाया गया था। इसे मूल रूप से LiveScript कहा जाता था लेकिन इसे बाद में जावास्क्रिप्ट में बदल दिया गया, शायद भ्रम पैदा करने के एकमात्र इरादे से।

इसकी कुछ फीचर्स यहां कुछ और विस्तार से दी गई हैं:

  • रनटाइम पर डायनामिक प्रोग्रामिंग भाषाएं एक्सेक्यूट होती हैं; वे कमपाइल नहीं हैं। इस वजह से, जावास्क्रिप्ट को कभी-कभी एक वास्तविक प्रोग्रामिंग भाषा (स्पष्ट रूप से एक गलतफहमी) के विपरीत एक स्क्रिप्टिंग भाषा माना जाता है। जब आपके पास HTML डॉक्यूमेंट में जावास्क्रिप्ट होता है तो इसे ब्राउज़र के भीतर पेज लोड के रूप में पार्स किया जाएगा, इसलिए यह "रनटाइम" पर होगा।
  • लूसली टाइप की गयी भाषाएं किसी भी मजबूत टाइपिंग सिस्टम पर जोर नहीं देती हैं। यदि आपने C या Java (जावास्क्रिप्ट नहीं) में प्रोग्राम किया है तो आपको पता चलेगा कि एक वेरिएबल घोषित करते समय आपको 'int' (इन्टिजर) जैसे टाइप को निर्दिष्ट करना होगा। जावास्क्रिप्ट अलग है जिसमें आपको टाइप निर्दिष्ट करने की आवश्यकता नहीं है।
  • जावास्क्रिप्ट के भीतर इनहेरिटेंस करने के लिए आपको prototypes नामक कुछ का उपयोग करना होगा। जावास्क्रिप्ट क्लासेज का समर्थन नहीं करता है।
  • जावास्क्रिप्ट भी एक functional भाषा है। यह फंक्शन्स को प्रथम श्रेणी के ऑब्जेक्ट्स के रूप में मानता है; lambda के पीछे यह आईडिया है।

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

डॉक्यूमेंट ऑब्जेक्ट मॉडल

डॉक्यूमेंट ऑब्जेक्ट मॉडल, जिसे आम तौर पर संक्षेप में DOM कहा जाता है, वह API है जिसके माध्यम से जावास्क्रिप्ट किसी वेबसाइट के भीतर कंटेंट के साथ इंटरैक्ट करता है। जावास्क्रिप्ट और DOM को आमतौर पर एक इकाई के रूप में देखा जाता है क्योंकि इस उद्देश्य के लिए जावास्क्रिप्ट का सबसे अधिक उपयोग किया जाता है (वेब पर कंटेंट के साथ इंटरेक्शन)। DOM API का उपयोग HTML और XML डाक्यूमेंट्स तक पहुंचने, ट्रैवर्स (traverse) करने और मैनिपुलेट करने के लिए किया जाता है।

Typical structure of a DOM hierarchy
टिपिकल DOM हायरार्की की एक मूल रूपरेखा (सरलीकृत)

यहां DOM के बारे में कुछ उल्लेखनीय चीजें हैं:

  • विंडो ऑब्जेक्ट ग्लोबल ऑब्जेक्ट के रूप में कार्य करता है, आप इसे "window" टाइप करके एक्सेस करते हैं। यह इस ऑब्जेक्ट के भीतर है कि आपका सभी जावास्क्रिप्ट कोड एक्सेक्यूट किये गए है। सभी ऑब्जेक्ट्स की तरह इसमें प्रॉपर्टी और मेथड्स हैं।
    • एक प्रॉपर्टी एक ऑब्जेक्ट के तहत संग्रहीत एक वेरिएबल है। वेब पेज पर बनाए गए सभी वेरिएबल मूल रूप से विंडो ऑब्जेक्ट की प्रॉपर्टी बन जाते हैं।
    • एक मेथड एक ऑब्जेक्ट के तहत संग्रहीत एक फंक्शन है। चूंकि सभी फंक्शन्स को कम से कम विंडो ऑब्जेक्ट के तहत संग्रहीत किया जाता है, इसलिए उन्हें सभी को 'methods' के रूप में रेफेर किया जा सकता है।
  • DOM प्रत्येक वेब डॉक्यूमेंट की संरचना के अनुरूप एक पदानुक्रम (हायरार्की) बनाता है। यह हायरार्की नोड्स से बानी है। कई अलग-अलग प्रकार के DOM नोड्स हैं, सबसे महत्वपूर्ण 'Element', 'Text' और 'Document ' हैं।
    • एक 'Element' नोड एक पेज के भीतर एक एलिमेंट का प्रतिनिधित्व करता है। तो यदि आपके पास पैराग्राफ एलिमेंट ('<p>') है तो इसे DOM के माध्यम से नोड के रूप में उपयोग किया जा सकता है।
    • एक 'Text' नोड एक पेज के भीतर सभी टेक्स्ट (एलिमेंट्स के भीतर) का प्रतिनिधित्व करता है। इसलिए यदि आपके पैराग्राफ में थोड़ा सा टेक्स्ट है तो इसे सीधे DOM के माध्यम से पहुंचा जा सकता है।
    • 'Document ' नोड पूरे डॉक्यूमेंट का प्रतिनिधित्व करता है। (यह DOM हायरार्की/ट्री का रूट-नोड है)।
    • यह भी ध्यान रखें कि एलिमेंट ऐट्रिब्यूट्स DOM खुद नोड्स हैं।
  • प्रत्येक लेआउट इंजन में DOM स्टैंडर्ड का थोड़ा अलग इम्प्लीमेंटेशन होता है। उदाहरण के लिए, Firefox वेब ब्राउज़र, जो Gecko लेआउट इंजन का उपयोग करता है, में काफी अच्छा इम्प्लीमेंटेशन है (हालांकि, पूरी तरह से W3C स्पेसिफिकेशन के साथ इनलाइन नहीं है) लेकिन Internet Explorer, जो Trident लेआउट इंजन का उपयोग करता है, इसकी छोटी और इन्कम्प्लीट इम्प्लीमेंटेशन के लिए जाना जाता है; वेब डेवलपमेंट समुदाय के भीतर यह बहुत पीड़ा का कारण!

फायरबग डाउनलोड करें

यदि आप फ़ायरफ़ॉक्स का उपयोग कर रहे हैं और आपके पास पहले से ही Firebug addon नहीं है, तो मैं आपको डाउनलोड करने के लिए रेकमेंड करता हूं और इसे अभी इंस्टॉल करता हूं। संपूर्ण डॉक्यूमेंट स्ट्रक्चर की एक सभ्य तस्वीर प्राप्त करने के लिए यह एक बहुत ही उपयोगी टूल है।

वेब पर जावास्क्रिप्ट

स्क्रिप्ट एलिमेंट

जब आप किसी वेबसाइट पर जावास्क्रिप्ट का उपयोग करना चाहते हैं तो उसे SCRIPT एलिमेंट के भीतर शामिल करना होगा:

जैसा कि आप देख सकते हैं कि हमारे पास हमारे डॉक्यूमेंट के नीचे एक SCRIPT एलिमेंट है। TYPE एट्रिब्यूट को सख्ती से 'application/javascript' पर सेट किया जाना चाहिए, लेकिन इसमें कोई आश्चर्य की बात नहीं है कि इंटरनेट एक्सप्लोरर में काम नहीं करता है, इसलिए हम या तो 'text/javascript' या किसी भी प्रकार के एट्रिब्यूट के साथ फंस गए हैं। यदि आप वेलिडेशन के बारे में परवाह करते हैं तो पूर्व सुझाव शायद आपको सूट करेगा।

Specify CDATA if you're using XHTML

यदि आप xHTML का उपयोग कर रहे हैं तो CDATA निर्दिष्ट करें

CDATA के रूप में अपनी स्क्रिप्ट निर्दिष्ट करना याद रखें!आपने यह भी देखा होगा कि उस SCRIPT एलिमेंट के भीतर हमारे पास कुछ कमेंटेड-आउट लाइनें हैं। ये XHTML-सपोर्टिंग ब्राउज़र को सूचित करते हैं कि SCRIPT एलिमेंट के कंटेंट 'करैक्टर डाटा' है और इसे XHTML मार्कअप के रूप में व्याख्या नहीं किया जाना चाहिए। यह केवल तभी जरूरी है जब आप अपने जावास्क्रिप्ट कोड में '<' या '>' करैक्टर का उपयोग करने की योजना बनाते हैं। स्पष्ट रूप से आप इस सब के बारे में भूल सकते हैं यदि आप सादे HTML का उपयोग कर रहे हैं।

Defer एट्रिब्यूट

SCRIPT एलिमेंट के अंदर डाली गई कोई भी जावास्क्रिप्ट पेज लोड के रूप में चलती है। एकमात्र अपवाद तब होता है जब एक SCRIPT एलिमेंट में 'defer' एट्रिब्यूट होता है। डिफ़ॉल्ट रूप से, जब कोई ब्राउज़र एक SCRIPT एलिमेंट से मिलता है, तो यह कोड को रोक देगा और चलाएगा, फिर यह डॉक्यूमेंट को पार्सिंग करेगा। DEFER एट्रिब्यूट ब्राउज़र को सूचित करता है कि कोड में कोई document-altering कोड नहीं है और इसलिए बाद में चलाया जा सकता है। इसके साथ एकमात्र समस्या यह है कि यह केवल IE में काम करता है, इसलिए इस एट्रिब्यूट से बचना ही शायद सबसे अच्छा है।

बाहरी स्क्रिप्ट से लिंक करना

यदि आप किसी बाहरी स्क्रिप्ट फ़ाइल से लिंक करना चाहते हैं तो बस अपने स्थान के अनुरूप अपने SCRIPT एलिमेंट में एक SRC एट्रिब्यूट जोड़ें। कोड इनलाइन लिखने की तुलना में अलग-अलग स्क्रिप्ट फ़ाइलों को रखना आम तौर पर एक बेहतर विचार है क्योंकि इसका मतलब है कि ब्राउज़र फ़ाइल को कैश कर सकता है। इसके अलावा आपको उस CDATA बकवास के बारे में चिंता करने की ज़रूरत नहीं है:

जावास्क्रिप्ट के आवश्यक तत्व

DOM के साथ जारी रखने से पहले कुछ जावास्क्रिप्ट जरूरी चीजों को समझना अच्छा विचार है। यदि आपको इनमें से कुछ को समझने में परेशानी है, तो चिंता न करें - आप उन्हें अंततः उठा पाएंगे!

जावास्क्रिप्ट में आपके पास विभिन्न टाइप्स की वैल्यूज हो सकती हैं। Numbers, Strings, Booleans, Objects, Undefined और Null हैं:

सिंगल-लाइन कमैंट्स दो फॉरवर्ड स्लैश (//) का उपयोग करके लिखी जाती हैं, उस लाइन के सभी शेष टेक्स्ट को पार्सर द्वारा एक कमेंट माना जाता है। कमेंट समाप्त करने के लिए मल्टी-लाइन कमैंट्स '/*' और '*/' का उपयोग करके signify किया जाता हैं।

Numbers

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

Strings

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

Booleans

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

उपरोक्त '===' आप एक तुलना ऑपरेटर है, हम बाद में उन्हें कवर करेंगे।

Functions

एक फंक्शन एक विशेष ऑब्जेक्ट है:

Arrays

एक ऐरे भी एक विशेष ऑब्जेक्ट है और इसमें डेटा वैल्यूज की संख्या कुछ भी हो सकती है। किसी array के भीतर डेटा वैल्यूज तक पहुंचने के लिए आपको उस नंबर का उपयोग करना होगा, जिसे आप पुनर्प्राप्त करने का प्रयास कर रहे आइटम के 'index' के रूप में जाना जाता है:

Objects

एक ऑब्जेक्ट नेम्ड वैल्यूज का एक संग्रह है (key - value पेयर्स)। यह एक array के सामान है, केवल अंतर यह है कि आप प्रत्येक डेटा वैल्यू के लिए एक नाम निर्दिष्ट कर सकते हैं।

If/Else Statement

जावास्क्रिप्ट में सबसे आम संरचनाओं में से एक 'IF' / 'ELSE' statement है। यह कुछ इस तरह चलता है:

जावास्क्रिप्ट ऑपरेटर:

यहां उन सभी को लिस्टिंग करने के बजाय मेरा सुझाव है कि आप ऑपरेटरों पर MDC article on Operators पर जाएं। यह उन्हें बहुत विस्तार से बताता है। मैंने आपको कुछ उदाहरण दिए हैं कि आपको कुछ ऑपरेटरों का उपयोग कैसे किया जाता है:

Looping

लूपिंग तब उपयोगी होती है जब आपको array में किसी ऑब्जेक्ट या किसी ऑब्जेक्ट के सभी सदस्यों के माध्यम से जाने की आवश्यकता होती है। जावास्क्रिप्ट में लूप का सबसे आम तरीका या तो FOR या WHILE स्टेटमेंट का उपयोग करना है।

About the FOR loop in JavaScript

Arrays के माध्यम से लूपिंग के लिए FOR लूप्स अधिक लोकप्रिय हैं।

वापस DOM पर

DOM नोड्स तक पहुंचना

आइए वैल्यू लें कि हमारे पास एक मूल XHTML डॉक्यूमेंट है जिसमें पैराग्राफ और एक unordered लिस्ट है:

इस पहले उदाहरण में हम 'getElementById' DOM मेथड का उपयोग करके हमारे पैराग्राफ तक पहुंचने जा रहे हैं:

(यह कोड उपरोक्त टेम्पलेट में SCRIPT एलिमेंट के भीतर जाता है)।

परिवर्तनीय 'introParagraph' अब DOM नोड का रिफरेन्स है। हम इस नोड के साथ कई चीजें कर सकते हैं, - हम इसके कंटेंट और ऐट्रिब्यूट्स से क्वेरी कर सकते हैं, और इसके किसी भी पहलू को मैनिपुलेट कर सकते हैं। हम इसे हटा सकते हैं, इसे क्लोन कर सकते हैं या इसे DOM ट्री के अन्य हिस्सों में ले जा सकते हैं।

कुछ भी जो डॉक्यूमेंट के भीतर मौजूद है के लिए हम जावास्क्रिप्ट और DOM API का उपयोग कर सकते हैं। इसलिए, हम उसी प्रकार से unordered लिस्ट तक पहुंच सकते हैं, केवल समस्या यह है कि इसमें कोई id नहीं है। आप इसे एक id दे सकते हैं और उसके बाद उपरोक्त मेथड का उपयोग कर सकते हैं या हम 'getElementsByTagName' का उपयोग कर इसे एक्सेस कर सकते हैं:

getElementsByTagName

'getElementsByTagName' मेथड एक लाइव नोड कलेक्शन/लिस्ट देता है। यह एक array के सामान है जिसमें इसकी length प्रॉपर्टी है। ध्यान देने योग्य एक महत्वपूर्ण बात यह है कि ये कलेक्शन "लाइव" हैं - यदि आप DOM में नया एलिमेंट जोड़ते हैं तो कलेक्शन स्वयं अपडेट हो जाएगा। चूंकि यह एक array जैसा ऑब्जेक्ट है, इसलिए हम प्रत्येक नोड को इंडेक्स के माध्यम से 0 से कलेक्शन की कुल लंबाई तक घटा सकते हैं (माइनस 1):

Accessing nodes and attributes within the DOM

DOM के भीतर नोड्स और ऐट्रिब्यूट्स तक पहुंच

Traversing the DOM

"traverse" शब्द का उपयोग DOM के माध्यम से यात्रा करने की क्रिया का वर्णन करने के लिए किया जाता है, नोड्स ढूंढ कर। DOM API हमें बहुत सारे नोड प्रॉपर्टी देता है जिसे हम डॉक्यूमेंट के भीतर सभी नोड्स के माध्यम से ऊपर और नीचे जाने के लिए उपयोग कर सकते हैं।

ये प्रॉपर्टी सभी नोड्स के इन्हेरेंट हैं और आपको रिलेटेड/क्लोज नोड्स तक पहुंचने में इनेबल हैं:

  • Node.childNodes: आप इसका उपयोग एक एलिमेंट के सभी डायरेक्ट चाइल्ड नोड्स तक पहुंचने के लिए कर सकते हैं। यह एक array जैसा ऑब्जेक्ट होगा, जिसे आप लूप कर सकते हैं। इस array के नोड्स में टेक्स्ट नोड्स और अन्य एलिमेंट नोड्स सहित सभी अलग-अलग नोड टाइप शामिल होंगे।
  • Node.firstChild: यह 'childNodes' array ('element.childNodes[0]') में पहले आइटम तक पहुंचने जैसा ही है। यह सिर्फ एक शॉर्टकट है।
  • Node.lastChild: यह 'childNodes' array ('element.childNodes[Element.childNodes.length-1]' में अंतिम आइटम तक पहुंचने जैसा ही है)। यह सिर्फ एक शॉर्टकट है।
  • Node.parentNode: यह आपको अपने वर्तमान नोड के पैरेंट नोड तक पहुंच प्रदान करता है। केवल एक पैरेंट नोड होगा। ग्रैंडपैरेंट तक पहुंचने के लिए आप बस 'Node.parentNode.parentNode' आदि का उपयोग करेंगे।
  • Node.nextSibling: यह आपको DOM ट्री के भीतर उसी स्तर पर अगले नोड तक पहुंच प्रदान करता है।
  • Node.previousSibling: यह आपको DOM ट्री के भीतर उसी स्तर पर अंतिम नोड तक पहुंच प्रदान करता है।
Traversing the DOM

एक डॉक्यूमेंट को ट्रावर्स करना (सरलीकृत - कृपया नीचे पढ़ें)

तो, जैसा कि आप देख सकते हैं, DOM ट्रावर्स करने में अविश्वसनीय रूप से आसान है, यह सिर्फ प्रॉपर्टी के नाम जानने का मामला है।

उपर्युक्त ग्राफिक के बारे में ध्यान देने योग्य एक बात: लिस्ट आइटम केवल उस फैशन में पुनर्प्राप्त किया जा सकता है यदि उनके बीच कोई सफेद जगह नहीं है। क्योंकि आपके पास किसी डॉक्यूमेंट में टेक्स्ट नोड्स और एलिमेंट नोड्स हो सकते हैं, '<ul>' और पहले '<li>' के बीच की जगह वास्तव में नोड के रूप में गिना जाता है। इसी तरह unordered लिस्ट वास्तव में पैराग्राफ के अगले सिबलिंग नहीं है - क्योंकि यह एक नई रेखा पर है, दोनों एलिमेंट्स के बीच जगह है - इसलिए, कोई और नोड! आम तौर पर, आप इस स्थिति में क्या करेंगे, 'childNodes' array के माध्यम से लूप करना होगा और 'nodeType' का परीक्षण करना होगा। 1 का 'nodeType' का अर्थ है कि यह एक एलिमेंट है, 2 का मतलब है कि यह एक एट्रिब्यूट है, 3 का मतलब है कि यह एक टेक्स्ट नोड है। आप यहां एक पूर्ण लिस्ट देख सकते हैं: https://developer.mozilla.org/En/DOM/Node.nodeType

यही सब कुछ है!

इस प्रकार सभी प्रमुख जावास्क्रिप्ट लाइब्रेरीज सीन के पीछे काम करते हैं; नेटिव DOM मेथड्स और प्रॉपर्टीज का उपयोग करके आप इन एलिमेंट्स को अच्छी तरह से पॉलिश अबास्ट्रक्शन के माध्यम से एक्सेस कर सकते हैं। फ्रेमवर्क के डाईहार्ड आपको क्या अलग करता है यह है कि अब आपके पास कुछ विचार है कि फ्रेमवर्क के बिना कैसे सर्वाइव करना है (यदि आप पहले से नहीं थे)!

अगली बार तक...

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

इस बीच और यदि आपने पहले से ही डॉग क्रॉकफ़ोर्ड (याहू! वीडियो साइट) द्वारा इन टॉक्स की जांच नहीं की है:

पढ़ने के लिए धन्यवाद!

  • अधिक दैनिक वेब डेवलपमेंट टूट्स और आर्टिकल्स के लिए NETTUTS RSS Feed की सदस्यता लें।


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.