हम फ्रंट-एंड डेवलपमेंट में काफी दिन से बानी कि सालन से एगो ट्रेंड देखनी: प्रोग्रामिंग के एगो नया पैराडाइम के साथ काम करे वाला युवा डेवलपर लोग एकर ऐतिहासिक संदर्भ के समझले बिना। बेशक, कुछ ना जानल एकदम समझ में आवेला। वेब एगो बहुते बड़हन जगह ह जवना में कौशल आ विशेषता के विविध सेट बा, आ हमनी के हमेशा ऊ ना मालूम होखे जवन हमनी के ना मालूम होखे. एह क्षेत्र में सीखल एगो चलत सफर ह ना कि एक बेर होखे वाला आ खतम हो जाए वाला काम. केस इन पॉइंट: हमरा टीम के केहु पूछलस कि का इ बतावल संभव बा कि यूजर यूआई में कवनो खास टैब से दूर नेविगेट करेले कि ना। हम जावास्क्रिप्ट के beforeunload इवेंट के ओर इशारा कईनी। बाकिर जे लोग एहसे पहिले एकरा से निपटे के काम कइले बा ऊ जानत बा कि ई संभव बा काहे कि ओह लोग के दोसरा साइट पर अनसेव डेटा का बारे में अलर्ट से मारल गइल बा जवना खातिर बिफोरअनलोड एगो ठेठ यूज केस ह. हम अपना सहयोगी के pageHide आ visibilityChange इवेंट के भी बढ़िया माप खातिर इशारा कइनी। ओह बारे में हमरा कइसे पता चलल? काहे कि ई दोसरा प्रोजेक्ट में आइल रहे, एहसे ना कि हम शुरू में जावास्क्रिप्ट सीखत घरी एह पर पढ़ले रहीं. हकीकत इ बा कि आधुनिक फ्रंट-एंड फ्रेमवर्क अपना से पहिले के तकनीक के दिग्गज कंपनी के कंधा प खड़ा बा। ई बिकास के तरीका सभ के एब्स्ट्रैक्ट करे लें, अक्सर बेहतर डेवलपर अनुभव खातिर जे ई जाने भा छूवे के जरूरत के कम क देला, या फिर खतम क देला कि परंपरागत रूप से जरूरी फ्रंट-एंड कॉन्सेप्ट रहल बाड़ें जिनहन के शायद सभका जानल जाय। सीएसएस ऑब्जेक्ट मॉडल (सीएसएसओएम) पर विचार करीं। रउरा उमेद कर सकीलें कि सीएसएस आ जावास्क्रिप्ट में काम करे वाला केहू के हाथ से सीएसएसओएम के अनुभव के गुच्छा बा बाकिर हमेशा अइसन ना होखे वाला बा. एगो ई-कॉमर्स साइट खातिर एगो रिएक्ट प्रोजेक्ट रहे जवना पर हम काम कइले रहीं जहाँ हमनी के वर्तमान में चुनल भुगतान प्रदाता खातिर स्टाइलशीट लोड करे के जरूरत रहे. समस्या ई रहे कि स्टाइलशीट हर पन्ना पर लोड होखत रहे जब एकर वास्तव में जरूरत खाली एगो खास पन्ना पर रहे। जवना डेवलपर के ई काम करावे के काम दिहल गइल रहे ऊ कबो स्टाइलशीट डायनामिक रूप से लोड ना कइले रहुवे. फेरु ई बात पूरा तरह से समझ में आवेला जब रिएक्ट ओह पारंपरिक तरीका के अमूर्त कर देला जवना पर रउरा पहुँचल होखब. संभव बा कि सीएसएसओएम कवनो अइसन चीज ना होखे जवना के जरूरत रउरा रोजमर्रा के काम में होखे. बाकिर संभावना बा कि रउरा कवनो समय एकरा से बातचीत करे के पड़ी, ऊहो एक बेर के मामिला में. एह अनुभवन से हमरा ई लेख लिखे के प्रेरणा मिलल. जंगल में कई गो मौजूदा वेब फीचर आ तकनीक बाड़ी सऽ जवना के शायद रउआ अपना रोजमर्रा के काम में सीधे कबो ना छू सकेनी। शायद रउरा वेब डेवलपमेंट में काफी नया बानी आ बस ओह लोग से अनजान बानी काहे कि रउरा कवनो खास ढाँचा के अमूर्तता में डूबल बानी जवना के गहिराह से जाने के जरूरत नइखे, भा बिल्कुल भी. हम खास तौर पर एक्सएमएल के बात करत बानी जवना के हमनी में से बहुते लोग जानत बा कि ई एगो प्राचीन भाषा ह जवन एचटीएमएल से बिल्कुल अलग नइखे. हम एकरा के हाल में WHATWG के चर्चा के चलते ले आवत बानी जवना में कहल गइल बा कि XSLT प्रोग्रामिंग के नाम से जानल जाए वाला XML स्टैक के एगो महत्वपूर्ण हिस्सा ब्राउजर से हटा दिहल जाव. ई ठीक ओही तरह के पुरान, मौजूदा तकनीक ह जवन हमनी का लगे सालन से बा जवना के इस्तेमाल कुछ ओतना व्यावहारिक काम खातिर कइल जा सकेला जतना कि हमार टीम के सीएसएसओएम के स्थिति. का रउवा पहिले एक्सएसएलटी के साथे काम कईले बानी? देखल जाव कि हमनी का एह पुरान तकनीक पर बहुते झुकल बानी जा आ आजु के वास्तविक दुनिया के समस्या से निपटे खातिर एक्सएमएल के संदर्भ से बाहर एकर फीचर के फायदा उठावत बानी जा कि ना. एक्सपाथ: केंद्रीय एपीआई के बा सबसे महत्वपूर्ण एक्सएमएल टेक्नोलॉजी जे शायद सीधा एक्सएमएल परिप्रेक्ष्य के बाहर सभसे उपयोगी होला ऊ हवे एक्सपाथ, ई एगो क्वेरी भाषा हवे जेवना से रउआँ के मार्कअप ट्री में कौनों भी नोड भा एट्रिब्यूट के एक रूट तत्व के साथ खोजल जा सके ला। हमरा एक्सएसएलटी से निजी स्नेह बा, लेकिन उहो एक्सपाथ प निर्भर बा, अवुरी रैंकिंग के महत्व में निजी स्नेह के एक ओर राखल जरूरी बा। एक्सएसएलटी के हटावे के तर्क में एक्सपाथ के कवनो जिक्र नइखे, एहसे हमरा लागत बा कि एकर अनुमति अबहियों बा. ई बढ़िया बा काहे कि एक्सपाथ एह टेक्नोलॉजी सभ के सूट में केंद्रीय आ सभसे महत्व वाला एपीआई हवे, खासतौर पर जब सामान्य एक्सएमएल इस्तेमाल से बाहर इस्तेमाल करे खातिर कुछ खोजे के कोसिस कइल जाला। ई एह से जरूरी बा काहें से कि, जबकि CSS चयनकर्ता सभ के इस्तेमाल आपके पन्ना में अधिकतर तत्व सभ के खोजे खातिर कइल जा सके ला, ई सभ ना खोज सके लें। एकरे अलावा, CSS चयनकर्ता सभ के इस्तेमाल DOM में ओकर वर्तमान स्थिति के आधार पर कौनों तत्व के खोजे खातिर ना कइल जा सके ला। एक्सपाथ कर सकेला। अब, रउरा में से कुछ लोग जे ई पढ़त बा, शायद एक्सपाथ जानत होखी, आ कुछ लोग के ना. एक्सपाथ टेक्नोलॉजी के एगो काफी बड़ क्षेत्र ह, अवुरी हम सचमुच में सभ मूल बात नईखी सिखा सकत अवुरी एकरा संगे करे के मस्त चीज़ भी अयीसन एक लेख में नईखी देखा सकत। हम असल में ऊ लेख लिखे के कोशिश कइले रहीं बाकिर औसतन स्मैशिंग मैगजीन के प्रकाशन 5000 शब्दन से अधिका ना जाला. हम त पहिलहीं से अधिका पर रहनी2,000 शब्द जबकि मूल बात के आधा रास्ता ही बा। त, हम एक्सपाथ के साथ मस्त काम करे शुरू कर रहल बानी आ कुछ लिंक देब जवना के इस्तेमाल रउरा बेसिक खातिर कर सकीलें अगर रउरा ई सामान दिलचस्प लागे. एक्सपाथ & सीएसएस के संयोजन कइल जा रहल बा एक्सपाथ बहुत सारा काम कर सकेला जवन सीएसएस चयनकर्ता तत्वन से पूछताछ करत घरी ना कर सकेलें. लेकिन CSS चयनकर्ता कुछ काम भी कर सकेला जवन XPath ना कर सकेला, यानी कि क्लास के नाम से तत्वन के क्वेरी कर सकेला|
सीएसएस के बा एक्सपाथ के बा .माईक्लास के बा /*[contains (@ क्लास, "माईक्लास")]।
एह उदाहरण में, CSS अइसन तत्व सभ के क्वेरी करे ला जेह में .myClass क्लासनाम होखे। एही बीच, XPath उदाहरण ओह तत्वन के क्वेरी करेला जवना में “myClass” स्ट्रिंग के साथ एगो एट्रिब्यूट क्लास होखे। दुसरा शब्द में, ई कौनों भी एट्रिब्यूट में myClass वाला तत्व सभ के चयन करे ला, जवना में .myClass क्लासनाम वाला तत्व भी सामिल बाड़ें — साथ ही साथ स्ट्रिंग में "myClass" वाला तत्व भी, जइसे कि .myClass2। एक्सपाथ ओह मायने में अउरी व्यापक बा। त, ना, ना। हम ई नइखीं कहत कि हमनी के सीएसएस के टॉस आउट करे के चाहीं आ एक्सपाथ के माध्यम से सगरी तत्वन के चयन शुरू करे के चाहीं. बात इहे नइखे. बात ई बा कि एक्सपैथ अइसन काम क सके ला जे सीएसएस बहुत उपयोगी ना क सके ला आ अबहिन ले हो सके ला, भले ई ब्राउजर स्टैक में पुरान टेक्नोलॉजी होखे आ पहिली नजर में ई साफ ना लउके। आईं दुनो तकनीक के एक संगे इस्तेमाल सिर्फ एहसे ना कईल जाए कि हमनी के कर सकतानी, बालुक एहीसे कि हमनी के ए प्रक्रिया में एक्सपैथ के बारे में कुछ जानब जा, जवना से इ आपके ढेर में एगो अवुरी टूल बन जाई — जवना के बारे में शायद आप ना जानत होखब कि उ पूरा समय से बा! समस्या ई बा कि जावास्क्रिप्ट के document.evaluate विधि आ जावास्क्रिप्ट खातिर CSS एपीआई के साथे हमनी के इस्तेमाल करे वाला विभिन्न क्वेरी चयनकर्ता विधि असंगत बा। हमनी के शुरुआत करे खातिर हम एगो संगत क्वेरी एपीआई बनवले बानी, हालांकि माना कि हम एह पर बहुते सोच नइखीं दिहले काहे कि ई हमनी का एहिजा जवन करत बानी जा ओकरा से अलगा हो गइल बा. इहाँ पुन: उपयोग करे लायक क्वेरी कंस्ट्रक्टर के एगो काफी सरल कामकाजी उदाहरण दिहल गइल बा: ब्रायन रासमुसेन के Pen queryXPath [forked] देखल जाय। हम डॉक्यूमेंट ऑब्जेक्ट पर दू गो मेथड जोड़ले बानी: queryCSSSelectors (जवन अनिवार्य रूप से querySelectorAll ह) आ queryXPaths. ई दुनों एगो queryResults ऑब्जेक्ट रिटर्न करे लें:
{ queryType: नोड्स के बा | स्ट्रिंग के बा | नंबर के बा | बूलियन, 1999 के बा। परिणाम: कवनो [] // html तत्व, xml तत्व, स्ट्रिंग, संख्या, बूलियन, queryCSSSelectors: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => क्वेरीरिजल्ट, queryXpaths: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => क्वेरीरिजल्ट } 1999 में भइल रहे।
queryCSSSelectors आ queryXpaths फंक्शन रउआँ द्वारा दिहल गइल क्वेरी के रिजल्ट सरणी में तत्वन पर चलावेला, जबले कि रिजल्ट सरणी टाइप नोड के होखे, बेशक। ना त ई खाली सरणी आ एगो प्रकार के नोड के साथ एगो queryResult वापस करी। अगर amend प्रॉपर्टी के true पर सेट कइल गइल होखे तब फंक्शन सभ आपन खुद के queryResults बदल दीहें। कवनो हालत में एकर इस्तेमाल उत्पादन के माहौल में ना होखे के चाहीं. हम ई तरीका शुद्ध रूप से दुनो क्वेरी एपीआई के एक साथ इस्तेमाल के विभिन्न प्रभाव के देखावे खातिर कर रहल बानी। उदाहरण के क्वेरी के बारे में बतावल गइल बा हम अलग-अलग एक्सपाथ क्वेरी के कुछ उदाहरण देखावल चाहत बानी जवन कुछ ताकतवर काम के देखावेला जवन ऊ लोग कर सकेला आ कइसे एकर इस्तेमाल दोसरा तरीका के जगह पर कइल जा सकेला. पहिला उदाहरण बा //li/text()। ई सभ li तत्व सभ के क्वेरी करे ला आ इनहन के टेक्स्ट नोड सभ के वापस करे ला। त, अगर हमनी के निम्नलिखित एचटीएमएल से क्वेरी करे के बा:
- के बा
- एक के बा
- दू के बा
- तीन के बा
...इहे वापस कइल जाला:
{"queryType":"xpathEvaluate","परिणाम":["एक","दू","तीन"],"resultType":"string"}
यानी हमनी के निम्नलिखित सरणी मिलेला: ["एक","दू","तीन"]। आमतौर पर, रउआँ ऊ पावे खातिर li तत्व सभ खातिर क्वेरी करीं, ओह क्वेरी के परिणाम के सरणी में बदल दीं, सरणी के मैप करीं आ हर तत्व के टेक्स्ट नोड वापस करीं। लेकिन हमनी के एक्सपाथ के साथ इ काम अउरी संक्षेप में कर सकेनी जा: document.queryXPaths ("//li/text ()").परिणाम बा।
ध्यान दीं कि टेक्स्ट नोड पावे के तरीका टेक्स्ट() के इस्तेमाल कइल बा, जवन फंक्शन सिग्नेचर नियर लउके ला — आ ई बा। ई कवनो तत्व के टेक्स्ट नोड वापस करेला। हमनी के उदाहरण में, मार्कअप में तीन गो li तत्व बाड़ें, हर एक में पाठ ("एक", "दू", आ "तीन") होला।
आईं text() क्वेरी के एगो अउरी उदाहरण देखल जाव. मान लीं कि ई हमनी के मार्कअप ह:
आईं एगो क्वेरी लिखीं जवन href एट्रिब्यूट वैल्यू रिटर्न करे: document.queryXPaths ("//a [text () = 'साइन इन']/@href").परिणाम बा।
ई वर्तमान दस्तावेज पर एक्सपैथ क्वेरी हवे, ठीक पिछला उदाहरण नियर, बाकी अबकी बेर हमनी के एगो लिंक (एलिमेंट) के href एट्रिब्यूट वापस कर देनी जा जेह में “साइन इन” टेक्स्ट होला। असल लौट गइलपरिणाम ["/login.html"] बा। एक्सपाथ फंक्शन के अवलोकन कइल जाला एक्सपाथ के कई गो फंक्शन बा, आ रउआ शायद एकरा से अपरिचित बानी। कई गो अइसन बाड़ी सऽ, हमरा लागत बा कि, जवना के बारे में जाने लायक बा, जवना में निम्नलिखित शामिल बाड़ी सऽ:
starts-withअगर कौनों टेक्स्ट कौनों खास अउरी टेक्स्ट उदाहरण से शुरू होखे तब starts-with(@href, 'http:') true रिटर्न करे ला अगर कौनों href एट्रिब्यूट http: से शुरू होखे। containsअगर कौनों टेक्स्ट में कौनों खास अउरी टेक्स्ट उदाहरण होखे तब contains(text(), "Smashing Magazine") true रिटर्न करे ला अगर कौनों टेक्स्ट नोड में कहीं भी "Smashing Magazine" शब्द होखे। countकवनो क्वेरी से केतना मिलान बा एकर गिनती वापस करे ला। उदाहरण खातिर, count(//*[starts-with(@href, 'http:']) एगो गिनती रिटर्न करे ला कि संदर्भ नोड में केतना लिंक सभ में href एट्रिब्यूट वाला तत्व बाड़ें जेह में http: से शुरू होखे वाला टेक्स्ट होला। substringजावास्क्रिप्ट सबस्ट्रिंग नियर काम करे ला, सिवाय एह बात के कि रउआँ स्ट्रिंग के आर्गुमेंट के रूप में पास करीं। उदाहरण खातिर, सबस्ट्रिंग ("हमार पाठ", 2, 4) "y t" रिटर्न करे ला। substring-beforeस्ट्रिंग के हिस्सा के दुसरा स्ट्रिंग से पहिले वापस करे ला। उदाहरण खातिर, substing-before("my text", " ") "my" रिटर्न करे ला। एही तरे substring-before("hi","bye") खाली स्ट्रिंग रिटर्न करे ला। substring-afterस्ट्रिंग के हिस्सा के दुसरा स्ट्रिंग के बाद वापस करे ला। उदाहरण खातिर, substing-after("my text", " ") "text" रिटर्न करे ला। एही तरे substring-after("hi","bye") खाली स्ट्रिंग वापस कर देला। normalize-space लेडिंग आ ट्रेलिंग व्हाइटस्पेस के स्ट्रिप क के आ व्हाइटस्पेस कैरेक्टर सभ के सीक्वेंस सभ के एकही स्पेस से बदल के नॉर्मलाइज कइल गइल व्हाइटस्पेस वाला आर्गुमेंट स्ट्रिंग के वापस करे ला। notReturns बूलियन true अगर तर्क गलत होखे, ना त गलत होखे। trueबूलियन सही वापस कर देला। falseबूलियन गलत वापस कर देला। concatजावास्क्रिप्ट concat के समान चीज, सिवाय एह बात के कि रउआँ एकरा के स्ट्रिंग पर मेथड के रूप में ना चलाईं। एकरा बजाय, रउआ ओह सब स्ट्रिंग के डाल देनी जवना के रउआ जोड़ल चाहत बानी। string-lengthई जावास्क्रिप्ट string-length के समान ना ह, बलुक एकरा के आर्गुमेंट के रूप में दिहल स्ट्रिंग के लंबाई वापस करेला। translateई एगो स्ट्रिंग लेला आ दूसरा आर्गुमेंट के तीसरा आर्गुमेंट में बदल देला। उदाहरण खातिर, translate("abcdef", "abc", "XYZ") XYZdef के आउटपुट देला।
एह खास एक्सपाथ फंक्शन सभ के अलावा, अउरी कई गो फंक्शन बाड़ें जे अपना जावास्क्रिप्ट समकक्ष सभ नियर काम करे लें — या मूल रूप से कौनों भी प्रोग्रामिंग भाषा में समकक्ष सभ — जे शायद रउआँ के भी उपयोगी लागी, जइसे कि फर्श, छत, गोल, योग इत्यादि। निम्नलिखित डेमो एह में से हर फंक्शन के देखावे ला: ब्रायन रासमुसेन द्वारा पेन एक्सपाथ न्यूमेरिकल फंक्शन [फोर्क कइल] देखल जाय। ध्यान दीं कि, अधिकतर स्ट्रिंग मैनिपुलेशन फंक्शन सभ नियर, कई गो संख्यात्मक फंक्शन सभ में एकही इनपुट लिहल जाला। ई, बेशक, एह से बा कि इनहन के इस्तेमाल क्वेरी खातिर होखे के चाहीं, जइसे कि पिछला एक्सपैथ उदाहरण में: //li [मंजिल (पाठ ()) > 250]/@val
अगर रउआँ इनहन के इस्तेमाल करीं, जइसे कि अधिकतर उदाहरण सभ में कइल जाला, तब रउआँ एकरा के पहिला नोड पर चलावे के काम करब जे पथ से मेल खाला। कुछ टाइप रूपांतरण फंक्शन भी बा जवना से रउआ शायद बचल चाहीं काहे कि जावास्क्रिप्ट में पहिले से आपन टाइप रूपांतरण के समस्या बा। बाकिर अइसनो समय हो सकेला जब रउरा कवनो स्ट्रिंग के कवनो नंबर में बदलल चाहत होखीं जेहसे कि ओकरा के कवनो दोसरा नंबर से जांच कइल जा सके. कवनो चीज के प्रकार सेट करे वाला फंक्शन बूलियन, नंबर, स्ट्रिंग, आ नोड होलें। ई सभ महत्वपूर्ण एक्सपाथ डेटाटाइप हवें। आ जइसन कि रउरा सोचत होखब कि एहमें से अधिकतर फंक्शन के इस्तेमाल ओह डाटाटाइप पर कइल जा सकेला जवन डीओएम नोड ना होखे. उदाहरण खातिर, सबस्ट्रिंग-आफ्टर कवनो स्ट्रिंग ले लेला जइसन कि हमनी के पहिलहीं कवर कइले बानी जा, बाकिर ई कवनो href एट्रिब्यूट से स्ट्रिंग हो सकेला. ई खाली एगो तार भी हो सके ला:
const testSubstringAfter = document.queryXPaths ("सबस्ट्रिंग-बाद ('नमस्कार दुनिया',' ')");
जाहिर बा कि ई उदाहरण हमनी के रिजल्ट सरणी के ["दुनिया"] के रूप में वापस दे दी। एकरा के एक्शन में देखावे खातिर हम एगो डेमो पन्ना बनवले बानी जवना में ओह चीजन के खिलाफ फंक्शन के इस्तेमाल कइल गइल बा जवन DOM नोड ना होखे: ब्रायन रासमुसेन के Pen queryXPath [forked] देखल जाय। रउआँ के अनुवाद फंक्शन के आश्चर्यजनक पहलू पर ध्यान देवे के चाहीं, जवन कि अगर रउआँ के दूसरा आर्गुमेंट में कवनो वर्ण होखे (अर्थात, रउआँ द्वारा अनुवाद कइल चाहत वर्ण सभ के लिस्ट) आ अनुवाद करे खातिर कौनों मिलान वर्ण ना होखे तब ऊ वर्ण आउटपुट से हटा दिहल जाला। एह तरह से ई:
translate('नमस्कार, हमार नाम इनिगो मोंटोया ह, तू हमरा बाबूजी के मार देले बाड़ू, मरला के तैयारी करऽ','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...स्ट्रिंग में परिणाम, रिक्त स्थान सहित: [" * * ** "] के बा।
एकर मतलब ई बा कि “क” अक्षर के तारा चिन्ह (*) में अनुवाद कइल जा रहल बा, बाकी हर दूसर वर्ण जेकर अनुवाद लक्ष्य स्ट्रिंग दिहल गइल होखे, पूरा तरीका से हटा दिहल जाला। सफेद जगह ही हमनी के लगे बाचल बाअनुवादित “क” वर्णन के बीच में बा. फेर फेरु ई क्वेरी:
translate('नमस्कार, हमार नाम इनिगो मोंटोया ह, तू हमरा बाबूजी के मार देले बाड़ू, मरे के तइयारी करऽ','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
...समस्या नइखे आ अइसन परिणाम आउटपुट करे ला जे अइसन लउके ला:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***" के बा।
ई रउआँ के ई बात पर चकित हो सके ला कि जावास्क्रिप्ट में ठीक उहे करे के कौनों आसान तरीका नइखे जवन एक्सपाथ ट्रांसलेट फंक्शन करे ला, हालाँकि कई गो यूज केस सभ खातिर, रेगुलर एक्सप्रेशन वाला replaceAll एकरा के संभाल सके ला। रउआँ उहे तरीका के इस्तेमाल कर सकत बानी जवन हम देखा चुकल बानी, लेकिन ऊ सबऑप्टिमल बा अगर रउआँ बस स्ट्रिंग के अनुवाद कइल चाहत बानी। निम्नलिखित डेमो जावास्क्रिप्ट संस्करण उपलब्ध करावे खातिर XPath के अनुवाद फंक्शन के लपेटत बा: ब्रायन रासमुसेन के पेन ट्रांसलेट फंक्शन [फोर्क कइल] देखल जाय। रउरा कहाँ अइसन कवनो चीज के इस्तेमाल कर सकीलें? तीन जगह के ऑफसेट के साथ सीजर साइफर एन्क्रिप्शन पर बिचार करीं (जइसे कि 48 B.C. से टॉप-ऑफ-द-लाइन एन्क्रिप्शन):
translate("सीजर रूबिकन पार करे के योजना बना रहल बाड़े!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", के बारे में जानकारी दिहल गइल बा। "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw") के बारे में जानकारी दिहल गइल बा।
इनपुट टेक्स्ट “सीजर रूबिकन पार करे के योजना बनावत बाड़े!” नतीजा बा कि “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” अलग-अलग संभावना के एगो अउरी त्वरित उदाहरण देवे खातिर हम एगो मेटल फंक्शन बनवनी जवन स्ट्रिंग इनपुट लेला आ टेक्स्ट वापस करे खातिर ट्रांसलेट फंक्शन के इस्तेमाल करेला, जवना में उमलाउट लेवे वाला सभ वर्ण भी शामिल बा। ब्रायन रासमुसेन के पेन मेटल फंक्शन [कांटा लगावल] देखल जाव।
const धातु = (स्ट्रीट) => { के बा। वापसी अनुवाद (str, "AOUaou","ÄÖÜäöü"); } 1999 में भइल रहे।
आ, अगर पाठ दिहल जाव “मोटली क्रू रूल्स, रॉक ऑन ड्यूड्स!”, त वापसी “मोटली क्रू रूल्स, रॉक ऑन ड्यूड्स!” जाहिर बा कि केहू के एह फंक्शन के तरह तरह के पैरोडी इस्तेमाल हो सकेला. अगर ऊ रउरा हईं त टीवीट्रोप्स के ई लेख रउरा के भरपूर प्रेरणा देबे के चाहीं. एक्सपाथ के साथ सीएसएस के उपयोग कइल जा रहल बा XPath के साथ CSS चयनकर्ता के इस्तेमाल करे के हमनी के मुख्य कारण याद करीं: CSS बहुत हद तक समझेला कि क्लास का होला, जबकि XPath के साथ रउआ जवन सबसे बढ़िया काम कर सकेनी ऊ बा क्लास एट्रिब्यूट के स्ट्रिंग तुलना। जवन कि अधिकतर मामिला में काम करी. बाकिर अगर रउरा कबो अइसन स्थिति में पड़ जाईं जहाँ, कह लीं कि केहू .primaryLinks आ .primaryLinks2 नाम के क्लास बनवले होखे आ रउरा .primaryLinks क्लास पावे खातिर XPath के इस्तेमाल करत होखीं, त संभव बा कि रउरा समस्या में पड़ जाईं. जबले अइसन कवनो बेवकूफी ना होखे तबले रउरा शायद एक्सपाथ के इस्तेमाल करब. बाकिर हमरा ई बतावत दुख होखत बा कि हम ओह जगहन पर काम कइले बानी जहाँ लोग ओह तरह के बेवकूफी भरल काम करेला. इहाँ एगो अउरी डेमो बा जवना में CSS आ XPath के एक साथ इस्तेमाल कइल गइल बा. एह में देखावल गइल बा कि जब हमनी का कोड के इस्तेमाल कवनो संदर्भ नोड पर एक्सपाथ चलावे खातिर करेनी जा जवन दस्तावेज के नोड ना होखे त का होला. ब्रायन रासमुसेन के पेन css आ xpath के एक साथ [फोर्क कइल] देखल जाय। CSS क्वेरी .relatedarticles a हवे, जवन .relatedarticles क्लास असाइन कइल गइल div में दुनों a तत्व ले आवे ला। एकरा बाद तीन गो “खराब” क्वेरी होला, माने कि अइसन क्वेरी जवन ओह तत्वन के संदर्भ नोड के रूप में चलावत घरी ऊ ना करे जवन हमनी का चाहत बानी जा. हम बता सकत बानी कि ऊ लोग रउरा उमेद से अलग व्यवहार काहे करत बा. सवाल के तीन गो खराब सवाल बा:
//text(): दस्तावेज में मौजूद सभ पाठ वापस करेला। //a/text(): दस्तावेज में लिंक के अंदर के सभ टेक्स्ट वापस करेला। ./a/text(): कवनो परिणाम ना देला।
एह परिणाम सभ के कारण ई बा कि जबकि राउर संदर्भ CSS क्वेरी से वापस आइल एगो तत्व हवे, // पूरा दस्तावेज के खिलाफ जाला। इहे एक्सपाथ के ताकत ह; सीएसएस कवनो नोड से ऊपर तक कवनो पूर्वज तक आ ओकरा बाद ओह पूर्वज के कवनो भाई-बहिन तक ना जा सकेला, आ ओह भाई-बहिन के कवनो वंशज तक नीचे ना चल सकेला। बाकिर एक्सपाथ कर सकेला. एही बीच, ./ वर्तमान नोड के बच्चा सभ से पूछताछ करे ला, जहाँ बिंदु (.) वर्तमान नोड के प्रतिनिधित्व करे ला आ आगे के स्लैश (/) कौनों चाइल्ड नोड पर जाए के प्रतिनिधित्व करे ला — ई कौनों बिसेसता, तत्व होखे भा टेक्स्ट होखे, ई पथ के अगिला हिस्सा से निर्धारित होला। बाकिर कवनो चाइल्ड कवनो तत्व नइखे जवन सीएसएस क्वेरी द्वारा चुनल गइल बा, एह तरह से ऊ क्वेरी भी कुछ ना वापस करेला। ओह आखिरी डेमो में तीन गो बढ़िया क्वेरी बा:
.//पाठ (), के बा। ./पाठ (), के बा। सामान्यीकरण-स्पेस (. / पाठ ()) के बा।
normalize-space क्वेरी XPath फंक्शन के इस्तेमाल के देखावे ले, बाकी बाकी क्वेरी सभ में शामिल समस्या के भी ठीक करे ले। एचटीएमएल के संरचना अइसन बा:
सेलेनियम वेबड्राइवर के साथ आपन फीचर परीक्षण के स्वचालित कइल के बा
क्वेरी टेक्स्ट नोड के सुरुआत आ अंत में लाइन फीड वापस करे ला,आ normalize-space एकरा के हटा देला। कवनो भी एक्सपैथ फंक्शन के इस्तेमाल जवन इनपुट वाला बूलियन के अलावा कुछ अउरी रिटर्न करे एक्सपैथ अन्य फंक्शन पर लागू होला। निम्नलिखित डेमो में कई गो उदाहरण देखावल गइल बा: ब्रायन रासमुसेन द्वारा Pen xpath फंक्शन के उदाहरण [forked] देखल जाय। पहिला उदाहरण एगो समस्या के देखावत बा जवना पर रउरा ध्यान राखे के चाहीं. खास तौर पर, निम्नलिखित कोड:
document.queryXPaths ("सबस्ट्रिंग-बाद (//a/@href,'https://')");
...एक ठो स्ट्रिंग वापस कर देला:
"www.smashingmagazine.com/2018/04/फीचर-टेस्टिंग-सेलेनियम-वेबड्राइवर/"।
एकर कवनो मतलब बा, ना? ई फंक्शन सरणी ना रिटर्न करे लें बलुक सिंगल स्ट्रिंग भा सिंगल नंबर रिटर्न करे लें। कई गो रिजल्ट के साथ कहीं भी फंक्शन चलावे से खाली पहिला रिजल्ट मिलेला। दूसरा नतीजा बतावेला कि हमनी के असल में का चाहत बानी जा:
document.queryCSSSelectors ("एक").queryXPaths ("सबस्ट्रिंग-बाद (./@href,'https://')");
जवन दू गो स्ट्रिंग के सरणी वापस करेला:
["www.smashingmagazine.com/2018/04/फीचर-टेस्टिंग-सेलेनियम-वेबड्राइवर/","www.smashingmagazine.com/2022/11/स्वचालित-परीक्षण-परिणाम-सुलभता-सुधार/"]
एक्सपाथ फंक्शन के नेस्ट कइल जा सकेला ठीक ओसही जइसे जावास्क्रिप्ट में फंक्शन के होला। त, अगर हमनी के स्मैशिंग मैगजीन के यूआरएल संरचना के बारे में जानत बानी जा, त हमनी के निम्नलिखित काम कर सकेनी जा (टेम्पलेट लिटरल के इस्तेमाल के सलाह दिहल जाला): `अनुवाद करीं ( सबस्ट्रिंग ( 1) के बा। सबस्ट्रिंग-आफ्टर (./@href, ‘www.smashingmagazine.com/') के बा। ,9), के बा। '/','')` के बा
ई एतना जटिल हो रहल बा कि एकरा के ई बतावे वाला टिप्पणी के जरूरत बा: www.smashingmagazine.com/ के बाद href एट्रिब्यूट से यूआरएल के सगरी ले लीं, पहिला नौ गो वर्ण हटाईं, फिर फॉरवर्ड स्लैश (/) वर्ण के कुछुओ ना अनुवाद करीं जेहसे कि अंत में आवे वाला फॉरवर्ड स्लैश से छुटकारा मिल सके। परिणामस्वरूप सरणी के रूप में:
["फीचर-परीक्षण-सेलेनियम-वेबड्राइवर","स्वचालित-परीक्षण-परिणाम-सुलभ-सुलभ-सुलभ"]
अधिका एक्सपाथ यूज केस बा एक्सपाथ सचमुच परीक्षण में चमक सकेला। एकर कारण देखल मुश्किल नइखे, काहें से कि एक्सपाथ के इस्तेमाल डोम में हर तत्व के, डीओएम में कवनो भी पोजीशन से पावे खातिर कइल जा सके ला जबकि सीएसएस ना हो सके ला। रउआँ कई गो आधुनिक बिल्ड सिस्टम सभ में CSS क्लास सभ के सुसंगत रहे पर भरोसा ना कर सके लीं, बाकी XPath के साथ, हमनी के एह बात के अउरी मजबूत मिलान करे में सक्षम बानी जा कि कौनों तत्व के टेक्स्ट सामग्री का होला, चाहे बदलत DOM संरचना के परवाह कइल जाय। अइसन तकनीक पर शोध भइल बा जवना से रउरा लचीला एक्सपाथ परीक्षण कर सकीलें. खाली एहसे खराब कुछ नइखे कि टेस्ट फ्लेक्स आउट हो जाव आ फेल हो जाव खाली एहसे कि कवनो सीएसएस चयनकर्ता अब काम ना करे काहे कि कवनो चीज के नाम बदल दिहल गइल बा भा हटा दिहल गइल बा. एक्सपाथ भी कई गो लोकेटर निष्कर्षण में वाकई में बढ़िया बा। कवनो तत्व के मिलान करे खातिर एक्सपाथ क्वेरी के इस्तेमाल करे के एक से अधिका तरीका बा। इहे हाल सीएसएस के भी बा। बाकिर एक्सपाथ क्वेरी सभ चीजन में अउरी लक्षित तरीका से ड्रिल क सके लीं जे रिटर्न के चीज के सीमित क सके लीं, जेह से रउआँ के कौनों बिसेस मिलान खोजल जा सके ला जहाँ कई गो संभावित मिलान हो सके ला। उदाहरण खातिर, हमनी के XPath के इस्तेमाल एगो बिसेस h2 तत्व के रिटर्न करे खातिर कर सके लीं जे div के भीतर होला जे तुरंत भाई-बहिन के div के बाद आवे ला जेह में, बदले में, एगो चाइल्ड इमेज तत्व होला जेह पर data-testID="leader" एट्रिब्यूट होला:
ई हेडलाइन ना मिलल
ई हेडलाइन भी मत मिले
नेता छवि खातिर हेडर
इहे सवाल बा: दस्तावेज.क्वेरीएक्सपथ (` के बा //div [ 1999 के बा। निम्नलिखित-भाई-बहिन::div [1]। /img [@data-testID='नेता'] के बा। ] . /h2/ के बा। पाठ () के बा। `) के बा;
आईं एगो डेमो डालल जाव कि ऊ सब कइसे एक साथ आवेला: ब्रायन रासमुसेन के पेन कॉम्प्लेक्स एच 2 क्वेरी [कांटा लगावल] देखल जाय। त, हँ, हँ. एक्सपाथ के इस्तेमाल से होखे वाला परीक्षण में कवनो भी तत्व के बहुत सारा संभावित रास्ता होला। एक्सएसएलटी 1.0 के अवमूल्यन कइल गइल बा हम शुरू में कहले रहनी कि क्रोम टीम ब्राउजर से एक्सएसएलटी 1.0 सपोर्ट के हटावे के योजना बनावत बिया। ई एह से जरूरी बा काहें से कि XSLT 1.0 में दस्तावेज रूपांतरण खातिर XML-केंद्रित प्रोग्रामिंग के इस्तेमाल होला जे बदले में XPath 1.0 पर निर्भर होला, जवन अधिकतर ब्राउजर सभ में पावल जाला। जब अयीसन होई त हमनी के एक्सपाथ के एगो प्रमुख घटक के नुकसान हो जाई। बाकिर एह तथ्य के देखत कि एक्सपैथ टेस्ट लिखे खातिर वाकई में बढ़िया बा, हमरा ई संभावना कम लागत बा कि समग्र रूप से एक्सपैथ जल्दिए गायब हो जाई. कहल जा सकेला कि हम देखले बानी कि कवनो फीचर के छीन लिहला पर लोग के रुचि ओह फीचर में हो जाला. आ ई बात निश्चित रूप से सही बा कि XSLT 1.0 के अप्रचलित होखे के मामिला में. हैकर न्यूज पर पूरा चरचा हो रहल बा जवन एह निंदा के खिलाफ तर्क से भरल बा. पोस्ट खुद एक्सएसएलटी के साथ ब्लॉगिंग फ्रेमवर्क बनावे के एगो बढ़िया उदाहरण बा। रऊवाॅंखुद चर्चा पढ़ सकेनी, लेकिन ई एह बात में आ जाला कि कइसे जावास्क्रिप्ट के इस्तेमाल ओह तरह के मामिला के संभाले खातिर एक्सएलएसटी खातिर शिम के रूप में कइल जा सकेला। हम इहो सुझाव देखले बानी कि ब्राउजर के SaxonJS के इस्तेमाल करे के चाहीं जवन जावास्क्रिप्ट के Saxon XSLT, XQUERY, आ XPath इंजन के पोर्ट ह. ई एगो दिलचस्प बिचार बा, खासतौर पर काहें से कि सैक्सन-जेएस एह स्पेसिफिकेशन सभ के वर्तमान संस्करण के लागू करे ला, जबकि अइसन कौनों ब्राउजर नइखे जे 1.0 से परे एक्सपाथ भा एक्सएसएलटी के कौनों संस्करण के लागू करे, आ अइसन कौनों भी नइखे जे एक्सक्वेरी के लागू करे। सैक्सनजेएस आ सैक्सन इंजन के अउरी संस्करणन के पीछे के कंपनी सैक्सनिका में नॉर्म टोवे-वाल्श से संपर्क कइनी. उ कहले कि- “अगर कवनो ब्राउजर विक्रेता आधुनिक एक्सएमएल तकनीक के ब्राउजर में एकीकृत करे खातिर सैक्सनजेएस के शुरुआती बिंदु के रूप में लेवे में रुचि राखत होखे त हमनी के ओकरा से एकरा प चर्चा करे में रोमांचित होखब जा।”— नॉर्म टोवे-वाल्श
लेकिन इहो जोड़ल गइल कि: "हमरा बहुत हैरानी होई जदी केहू सोचे कि सैक्सनजेएस के वर्तमान रूप में लेके ओकरा के ब्राउजर बिल्ड में बिना बदलाव के छोड़ल आदर्श तरीका होई। एगो ब्राउज़र विक्रेता, एह तथ्य के प्रकृति के चलते कि उ ब्राउज़र बनावेले, एकीकरण के बहुत गहिराह स्तर प संपर्क क सकता, जवन कि हमनी के 'बाहर से' क सकतानी।"— नॉर्म टोवे-वाल्श
ध्यान देवे वाला बात बा कि टोवे-वाल्श के इ टिप्पणी एक्सएसएलटी के अवमूल्यन के घोषणा से करीब एक सप्ताह पहिले आईल रहे। निष्कर्ष निकलल बा हम अउरी आगे बढ़ सकत रहनी। बाकिर हमरा उमेद बा कि एहसे एक्सपाथ के ताकत के प्रदर्शन भइल बा आ रउरा सभे के भरपूर उदाहरण मिलल बा जवना से ई देखावल गइल बा कि एकर इस्तेमाल बड़हन काम हासिल करे खातिर कइसे कइल जा सकेला. ई ब्राउजर स्टैक में पुरान तकनीक के एगो सही उदाहरण बा जवना के आजुओ भरपूर उपयोगिता बा, भले रउरा कबो ना जानत होखीं कि एकर अस्तित्व बा भा कबो एकरा लगे चहुँपे पर विचार ना कइले होखीं. आगे पढ़ल जा सकेला
“प्राकृतिक भाषा के साथ स्वचालित वेब परीक्षण के लचीलापन बढ़ावल” (एसीएम डिजिटल लाइब्रेरी) मरौन आयली, यूसुफ बकौनी, नादर जल्लौल, आ रीमा किलानी के ई लेख लचीला परीक्षण लिखे खातिर कई गो एक्सपैथ उदाहरण देला। एक्सपाथ (MDN)अगर रउआँ एक्सपाथ के काम करे के तरीका के विस्तार से बतावे वाला तकनीकी सफाई चाहत बानी त ई शुरू करे खातिर एगो बेहतरीन जगह बा। XPath Tutorial (ZVON)हमरा ई ट्यूटोरियल हमरा खुद के सीखला में सबसे मददगार लागल बा, जवना के श्रेय बहुत सारा उदाहरण आ स्पष्ट व्याख्या के जाला। XPatherई इंटरैक्टिव टूल रउआ के सीधे कोड के साथ काम करे के सुविधा देला।
