আমি বছরের পর বছর ধরে একটি প্রবণতা দেখতে যথেষ্ট দীর্ঘ সময় ধরে ফ্রন্ট-এন্ড ডেভেলপমেন্টে ছিলাম: তরুণ বিকাশকারীরা এর ঐতিহাসিক প্রেক্ষাপট না বুঝেই প্রোগ্রামিংয়ের একটি নতুন দৃষ্টান্ত নিয়ে কাজ করছেন। এটা অবশ্যই, কিছু না জানা পুরোপুরি বোধগম্য। ওয়েব হল একটি অনেক বড় জায়গা যেখানে বিভিন্ন ধরনের দক্ষতা এবং বিশেষত্ব রয়েছে এবং আমরা যা জানি না তা আমরা সবসময় জানি না। এই ক্ষেত্রে শেখা একটি চলমান যাত্রা, যা একবার ঘটে এবং শেষ হয়। কেস ইন পয়েন্ট: আমার দলের কেউ জিজ্ঞাসা করেছিল যে ব্যবহারকারীরা UI-তে একটি নির্দিষ্ট ট্যাব থেকে দূরে নেভিগেট করে কিনা তা বলা সম্ভব কিনা। আমি জাভাস্ক্রিপ্টের আনলোড ইভেন্টের আগে উল্লেখ করেছি। কিন্তু যারা এর আগে এটি মোকাবেলা করেছেন তারা জানেন যে এটি সম্ভব কারণ তারা অন্যান্য সাইটে অসংরক্ষিত ডেটা সম্পর্কে সতর্কতার সাথে আঘাত পেয়েছে, যার জন্য আগে আনলোড একটি সাধারণ ব্যবহারের ক্ষেত্রে। আমি ভাল পরিমাপের জন্য আমার সহকর্মীর কাছে পৃষ্ঠা লুকান এবং দৃশ্যমানতা পরিবর্তন ইভেন্টগুলিকে নির্দেশ করেছি৷ আমি যে সম্পর্কে জানলাম কিভাবে? কারণ এটি অন্য একটি প্রকল্পে এসেছে, কারণ আমি প্রাথমিকভাবে জাভাস্ক্রিপ্ট শেখার সময় এটির উপর অধ্যয়ন করেছি। আসল বিষয়টি হ'ল আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্কগুলি তাদের আগেকার প্রযুক্তি জায়ান্টদের কাঁধে দাঁড়িয়ে আছে। এগুলি বিমূর্ত বিকাশের অনুশীলনগুলি, প্রায়শই একটি ভাল বিকাশকারীর অভিজ্ঞতার জন্য যা কমিয়ে দেয় বা এমনকি বাদ দেয়, যা জানা বা স্পর্শ করার প্রয়োজনীয়তা ঐতিহ্যগতভাবে প্রয়োজনীয় ফ্রন্ট-এন্ড ধারণাগুলি প্রত্যেকেরই সম্ভবত জানা উচিত। CSS অবজেক্ট মডেল (CSSOM) বিবেচনা করুন। আপনি হয়তো আশা করতে পারেন যে CSS এবং JavaScript-এ কাজ করা যে কোনো ব্যক্তির হাতে CSSOM-এর অভিজ্ঞতা আছে, কিন্তু সবসময় তা হবে না। একটি ই-কমার্স সাইটের জন্য একটি প্রতিক্রিয়া প্রকল্প ছিল যেখানে আমি কাজ করেছি যেখানে আমাদের বর্তমানে নির্বাচিত অর্থ প্রদানকারীর জন্য একটি স্টাইলশীট লোড করতে হবে৷ সমস্যাটি ছিল যে স্টাইলশীটটি প্রতিটি পৃষ্ঠায় লোড হচ্ছিল যখন এটি শুধুমাত্র একটি নির্দিষ্ট পৃষ্ঠায় সত্যিই প্রয়োজন ছিল। এটি ঘটানোর জন্য যে ডেভেলপারকে দায়িত্ব দেওয়া হয়েছিল তিনি কখনও গতিশীলভাবে স্টাইলশীট লোড করেননি। আবার, এটি সম্পূর্ণরূপে বোধগম্য যখন প্রতিক্রিয়া বিমূর্ত প্রথাগত পদ্ধতির জন্য আপনি পৌঁছাতে পারেন। CSSOM সম্ভবত আপনার দৈনন্দিন কাজে প্রয়োজন এমন কিছু নয়। কিন্তু এটি সম্ভবত একটি সময়ে, এমনকি একবারের ক্ষেত্রেও আপনাকে এটির সাথে ইন্টারঅ্যাক্ট করতে হবে। এই অভিজ্ঞতাগুলি আমাকে এই নিবন্ধটি লিখতে অনুপ্রাণিত করেছিল। বন্যের মধ্যে অনেক বিদ্যমান ওয়েব বৈশিষ্ট্য এবং প্রযুক্তি রয়েছে যা আপনি আপনার দৈনন্দিন কাজে সরাসরি স্পর্শ করতে পারবেন না। সম্ভবত আপনি ওয়েব ডেভেলপমেন্টে মোটামুটি নতুন এবং আপনি কেবল সেগুলি সম্পর্কে অবগত নন কারণ আপনি একটি নির্দিষ্ট কাঠামোর বিমূর্ততায় ডুবে আছেন যার জন্য আপনাকে এটি গভীরভাবে জানার প্রয়োজন হয় না, এমনকি একেবারেই নয়। আমি বিশেষভাবে XML সম্পর্কে কথা বলছি, যা আমরা অনেকেই জানি যে একটি প্রাচীন ভাষা HTML থেকে সম্পূর্ণ ভিন্ন নয়। আমি সাম্প্রতিক WHATWG আলোচনার কারণে এটি আনছি যে XSLT প্রোগ্রামিং নামে পরিচিত XML স্ট্যাকের একটি উল্লেখযোগ্য অংশ ব্রাউজার থেকে সরানো উচিত। এটি ঠিক সেই ধরণের পুরানো, বিদ্যমান প্রযুক্তি যা আমরা বছরের পর বছর ধরে রেখেছি যা আমার দল CSSOM পরিস্থিতির মতো ব্যবহারিক কিছুর জন্য ব্যবহার করা যেতে পারে। আপনি কি আগে XSLT এর সাথে কাজ করেছেন? আসুন দেখি আমরা এই পুরানো প্রযুক্তির দিকে খুব বেশি ঝুঁকে পড়ি এবং XML এর প্রেক্ষাপটের বাইরে এর বৈশিষ্ট্যগুলিকে আজ বাস্তব-বিশ্বের সমস্যাগুলি মোকাবেলা করার জন্য ব্যবহার করি। XPath: কেন্দ্রীয় API সবচেয়ে গুরুত্বপূর্ণ XML প্রযুক্তি যা সম্ভবত সরাসরি XML দৃষ্টিভঙ্গির বাইরে সবচেয়ে উপযোগী তা হল XPath, একটি ক্যোয়ারী ল্যাঙ্গুয়েজ যা আপনাকে একটি রুট এলিমেন্ট সহ একটি মার্কআপ ট্রিতে যেকোনো নোড বা অ্যাট্রিবিউট খুঁজে পেতে দেয়। XSLT-এর প্রতি আমার একটি ব্যক্তিগত স্নেহ আছে, কিন্তু এটি XPath-এর উপরও নির্ভর করে, এবং ব্যক্তিগত স্নেহকে অবশ্যই র্যাঙ্কিংয়ের গুরুত্বে একপাশে রাখা উচিত। XSLT অপসারণের যুক্তি XPath এর কোন উল্লেখ করে না, তাই আমি মনে করি এটি এখনও অনুমোদিত। এটি ভাল কারণ XPath হল এই প্রযুক্তির স্যুটে কেন্দ্রীয় এবং সবচেয়ে গুরুত্বপূর্ণ API, বিশেষ করে যখন সাধারণ XML ব্যবহারের বাইরে ব্যবহার করার জন্য কিছু খুঁজে বের করার চেষ্টা করা হয়। এটি গুরুত্বপূর্ণ কারণ, যদিও CSS নির্বাচকরা আপনার পৃষ্ঠার বেশিরভাগ উপাদানগুলি খুঁজে পেতে ব্যবহার করা যেতে পারে, তারা সেগুলিকে খুঁজে পায় না। অধিকন্তু, CSS নির্বাচকদের DOM-এ তার বর্তমান অবস্থানের উপর ভিত্তি করে একটি উপাদান খুঁজে পেতে ব্যবহার করা যাবে না। XPath পারেন। এখন, আপনারা কেউ এটা পড়ছেন হয়তো XPath জানেন, আবার কেউ কেউ জানেন না। XPath হল প্রযুক্তির একটি বেশ বড় ক্ষেত্র, এবং আমি সত্যিই সমস্ত মৌলিক বিষয়গুলি শেখাতে পারি না এবং এটির মতো একটি একক নিবন্ধে আপনাকে চমৎকার জিনিসগুলিও দেখাতে পারি। আমি আসলে সেই নিবন্ধটি লেখার চেষ্টা করেছি, কিন্তু গড় Smashing Magazine প্রকাশনা 5,000 শব্দের বেশি নয়। আমি আগে থেকে আরো বেশী ছিল2,000 শব্দ শুধুমাত্র মৌলিক মাধ্যমে অর্ধেক। সুতরাং, আমি XPath এর সাথে দুর্দান্ত জিনিসগুলি করা শুরু করতে যাচ্ছি এবং আপনাকে কিছু লিঙ্ক দেব যা আপনি যদি এই জিনিসটিকে আকর্ষণীয় মনে করেন তবে আপনি মৌলিক বিষয়গুলির জন্য ব্যবহার করতে পারেন৷ XPath এবং CSS এর সমন্বয় XPath অনেক কিছু করতে পারে যা CSS নির্বাচকরা উপাদানগুলি অনুসন্ধান করার সময় করতে পারে না। কিন্তু CSS নির্বাচকরা এমন কিছু জিনিসও করতে পারে যা XPath করতে পারে না, যেমন, ক্লাসের নাম অনুসারে উপাদানগুলি জিজ্ঞাসা করে।
সিএসএস এক্সপাথ .myClass /*[ধারণ করে(@class, "myClass")]
এই উদাহরণে, একটি .myClass ক্লাসনেম ধারণ করে এমন উপাদানগুলিকে CSS কোয়েরি করে। এদিকে, XPath উদাহরণটি "myClass" স্ট্রিং সহ একটি অ্যাট্রিবিউট ক্লাস ধারণ করে এমন উপাদানগুলিকে জিজ্ঞাসা করে৷ অন্য কথায়, এটি যে কোনো অ্যাট্রিবিউটে myClass সহ উপাদান নির্বাচন করে, যার মধ্যে .myClass ক্লাসনামের উপাদান রয়েছে — সেইসাথে স্ট্রিং-এ "myClass" সহ উপাদান, যেমন .myClass2। XPath সেই অর্থে আরও বিস্তৃত। তাই, না. আমি পরামর্শ দিচ্ছি না যে আমাদের সিএসএস টস করা উচিত এবং XPath এর মাধ্যমে সমস্ত উপাদান নির্বাচন করা উচিত। এটা বিন্দু না. মূল বিষয় হল XPath এমন কিছু করতে পারে যা CSS করতে পারে না এবং এখনও খুব দরকারী হতে পারে, যদিও এটি ব্রাউজার স্ট্যাকের একটি পুরানো প্রযুক্তি এবং প্রথম নজরে স্পষ্ট মনে নাও হতে পারে। আসুন দুটি প্রযুক্তি একসাথে ব্যবহার করি শুধুমাত্র এই কারণেই নয় যে আমরা পারি, কিন্তু এই প্রক্রিয়ায় আমরা XPath সম্পর্কে কিছু শিখব, এটিকে আপনার স্ট্যাকের আরেকটি টুল বানিয়ে ফেলব — যেটি আপনি হয়তো জানেন না সব সময় সেখানে ছিল! সমস্যা হল JavaScript এর document.evaluate পদ্ধতি এবং আমরা JavaScript-এর জন্য CSS API-এর সাথে যে বিভিন্ন ক্যোয়ারী সিলেক্টর পদ্ধতি ব্যবহার করি তা বেমানান। আমাদের শুরু করার জন্য আমি একটি সামঞ্জস্যপূর্ণ ক্যোয়ারী এপিআই তৈরি করেছি, যদিও স্বীকার করছি, আমরা এখানে যা করছি তা থেকে এটি একটি প্রস্থান হওয়ায় আমি এটিতে খুব বেশি চিন্তা করিনি। এখানে একটি পুনঃব্যবহারযোগ্য ক্যোয়ারী কনস্ট্রাক্টরের একটি মোটামুটি সহজ কাজের উদাহরণ রয়েছে: ব্রায়ান রাসমুসেনের পেন কোয়েরি এক্সপাথ [কাঁটাযুক্ত] দেখুন। আমি ডকুমেন্ট অবজেক্টে দুটি পদ্ধতি যোগ করেছি: queryCSSSelectors (যা মূলত querySelectorAll) এবং queryXPaths। এই উভয় একটি queryResults অবজেক্ট প্রদান করে:
{ queryType: nodes | স্ট্রিং | সংখ্যা | বুলিয়ান ফলাফল: যেকোনো [] // html উপাদান, xml উপাদান, স্ট্রিং, সংখ্যা, বুলিয়ান, queryCSSSselectors: (query: string, amend: boolean) => কোয়েরি ফলাফল, queryXpaths: (query: string, amend: boolean) => কোয়েরি ফলাফল }
queryCSSSelectors এবং queryXpaths ফাংশনগুলি ফলাফল অ্যারের উপাদানগুলির উপর আপনার দেওয়া কোয়েরি চালায়, যতক্ষণ না ফলাফল অ্যারেটি অবশ্যই নোডের হয়। অন্যথায়, এটি একটি খালি অ্যারে এবং এক ধরনের নোড সহ একটি queryResult ফেরত দেবে। যদি সংশোধন সম্পত্তি সত্য সেট করা হয়, ফাংশনগুলি তাদের নিজস্ব অনুসন্ধানের ফলাফল পরিবর্তন করবে। কোন অবস্থাতেই এটি উৎপাদন পরিবেশে ব্যবহার করা উচিত নয়। একসাথে দুটি ক্যোয়ারী API ব্যবহার করার বিভিন্ন প্রভাব প্রদর্শন করার জন্য আমি এইভাবে এটি করছি। উদাহরণ প্রশ্ন আমি বিভিন্ন XPath কোয়েরির কয়েকটি উদাহরণ দেখাতে চাই যা কিছু শক্তিশালী জিনিস প্রদর্শন করে যা তারা করতে পারে এবং কীভাবে সেগুলি অন্যান্য পদ্ধতির জায়গায় ব্যবহার করা যেতে পারে। প্রথম উদাহরণ হল //li/text()। এটি সমস্ত li উপাদানগুলিকে জিজ্ঞাসা করে এবং তাদের পাঠ্য নোডগুলি প্রদান করে। সুতরাং, যদি আমরা নিম্নলিখিত এইচটিএমএল অনুসন্ধান করতে চাই:
- একটি
- দুই
- তিন
…এটি যা ফেরত দেওয়া হয়:
{"queryType":"xpathEvaluate","results":["one","two","three"],"resultType":"string"}
অন্য কথায়, আমরা নিম্নলিখিত অ্যারে পাই: ["এক","দুই","তিন"]। সাধারণত, আপনি এটি পেতে li উপাদানগুলির জন্য অনুসন্ধান করবেন, সেই প্রশ্নের ফলাফলটিকে একটি অ্যারেতে পরিণত করুন, অ্যারেটি ম্যাপ করুন এবং প্রতিটি উপাদানের পাঠ্য নোডটি ফেরত দিন। তবে আমরা XPath এর সাথে আরও সংক্ষিপ্তভাবে এটি করতে পারি: document.queryXPaths("//li/text()").ফলাফল।
লক্ষ্য করুন যে একটি টেক্সট নোড পাওয়ার উপায় হল টেক্সট(), যা একটি ফাংশন সিগনেচারের মতো দেখায় - এবং এটি হয়। এটি একটি উপাদানের পাঠ্য নোড প্রদান করে। আমাদের উদাহরণে, মার্কআপে তিনটি li উপাদান রয়েছে, প্রতিটিতে পাঠ্য রয়েছে ("এক", "দুই" এবং "তিন")।
আসুন একটি টেক্সট() প্রশ্নের আরও একটি উদাহরণ দেখি। ধরে নিন এটি আমাদের মার্কআপ:
আসুন একটি ক্যোয়ারী লিখি যা href এট্রিবিউট মান প্রদান করে: document.queryXPaths("//a[text() = 'সাইন ইন']/@href").ফলাফল।
এটি বর্তমান নথিতে একটি XPath ক্যোয়ারী, ঠিক শেষ উদাহরণের মতো, কিন্তু এইবার আমরা একটি লিঙ্কের href অ্যাট্রিবিউট (একটি উপাদান) ফেরত দিই যাতে "সাইন ইন" লেখা রয়েছে৷ আসল ফিরে এসেছেফলাফল হল ["/login.html"]। XPath ফাংশন ওভারভিউ এখানে অনেকগুলি XPath ফাংশন রয়েছে এবং আপনি সম্ভবত সেগুলির সাথে অপরিচিত। আমি মনে করি, নিম্নলিখিতগুলি সহ বেশ কয়েকটি রয়েছে যা জানার যোগ্য:
starts-withযদি একটি টেক্সট একটি নির্দিষ্ট অন্য টেক্সট উদাহরণ দিয়ে শুরু হয়, starts-with(@href, 'http:') সত্য রিটার্ন করে যদি একটি href অ্যাট্রিবিউট http: দিয়ে শুরু হয়। যদি একটি টেক্সটে একটি নির্দিষ্ট অন্যান্য টেক্সট উদাহরণ থাকে, তাহলে (টেক্সট(), "স্ম্যাশিং ম্যাগাজিন") টেক্সট নোডের যেকোন জায়গায় "স্ম্যাশিং ম্যাগাজিন" শব্দ থাকলে তা সত্য ফেরত দেয়। count একটি প্রশ্নে কতগুলি মিল রয়েছে তার একটি গণনা প্রদান করে। উদাহরণ স্বরূপ, count(//*[starts-with(@href, 'http:']) প্রসঙ্গ নোডে কতগুলি লিঙ্কের একটি href অ্যাট্রিবিউট সহ উপাদান রয়েছে তার একটি গণনা প্রদান করে যেখানে http: দিয়ে শুরু হওয়া পাঠ্য রয়েছে। সাবস্ট্রিং জাভাস্ক্রিপ্ট সাবস্ট্রিং এর মত কাজ করে, আপনি স্ট্রিংকে আর্গুমেন্ট হিসাবে পাস না করলে। উদাহরণস্বরূপ, সাবস্ট্রিং("আমার পাঠ্য", 2, 4) "y t" প্রদান করে। substring-before অন্য স্ট্রিংয়ের আগে একটি স্ট্রিংয়ের অংশ ফেরত দেয়। উদাহরণস্বরূপ, substing-before("my text", " ") "my" প্রদান করে। একইভাবে, substring-before("hi","bye") একটি খালি স্ট্রিং প্রদান করে। substring-afterঅন্য স্ট্রিংয়ের পর একটি স্ট্রিংয়ের অংশ ফেরত দেয়। উদাহরণস্বরূপ, সাবস্টিং-আফটার("আমার পাঠ্য", "") "পাঠ্য" প্রদান করে। একইভাবে, substring-after("hi","bye") একটি খালি স্ট্রিং ফেরত দেয়। নর্মালাইজ-স্পেস রিটার্ন হোয়াইটস্পেস সহ আর্গুমেন্ট স্ট্রিংকে স্বাভাবিক করা হয় লিডিং এবং ট্রেইলিং হোয়াইটস্পেস স্ট্রিপ করে এবং হোয়াইটস্পেস অক্ষরগুলির ক্রমগুলিকে একটি একক স্থান দ্বারা প্রতিস্থাপন করে। not একটি বুলিয়ান সত্য ফেরত দেয় যদি যুক্তিটি মিথ্যা হয়, অন্যথায় মিথ্যা। true বুলিয়ান সত্য ফেরত দেয়। মিথ্যা বুলিয়ান মিথ্যা ফেরত দেয়। concat জাভাস্ক্রিপ্ট concat হিসাবে একই জিনিস, আপনি একটি স্ট্রিং একটি পদ্ধতি হিসাবে এটি চালানো না ছাড়া. পরিবর্তে, আপনি সংযুক্ত করতে চান এমন সমস্ত স্ট্রিংগুলি রাখুন৷ স্ট্রিং-লেংথ এটি জাভাস্ক্রিপ্ট স্ট্রিং-লেংথের মতো নয়, বরং এটি একটি আর্গুমেন্ট হিসাবে দেওয়া স্ট্রিংয়ের দৈর্ঘ্য প্রদান করে। অনুবাদ এটি একটি স্ট্রিং নেয় এবং দ্বিতীয় আর্গুমেন্টকে তৃতীয় আর্গুমেন্টে পরিবর্তন করে। উদাহরণস্বরূপ, অনুবাদ করুন("abcdef", "abc", "XYZ") XYZdef আউটপুট।
এই বিশেষ XPath ফাংশনগুলি ছাড়াও, আরও অনেকগুলি ফাংশন রয়েছে যেগুলি তাদের জাভাস্ক্রিপ্টের প্রতিকূলগুলির মতোই কাজ করে — বা মূলত কোনও প্রোগ্রামিং ভাষার সমকক্ষগুলি — যেগুলি আপনি সম্ভবত দরকারীও পাবেন, যেমন মেঝে, ছাদ, বৃত্তাকার, সমষ্টি ইত্যাদি। নিম্নলিখিত ডেমো এই ফাংশনগুলির প্রতিটি চিত্রিত করে: ব্রায়ান রাসমুসেনের পেন এক্সপাথ সংখ্যাসূচক ফাংশন [কাঁটাযুক্ত] দেখুন। উল্লেখ্য যে, বেশিরভাগ স্ট্রিং ম্যানিপুলেশন ফাংশনের মতো, অনেক সংখ্যাসূচক একক ইনপুট নেয়। এটি অবশ্যই, কারণ তারা ক্যোয়ারী করার জন্য ব্যবহার করার কথা, যেমন শেষ XPath উদাহরণে: //li[floor(text()) > 250]/@val
আপনি যদি সেগুলি ব্যবহার করেন, যেমনটি বেশিরভাগ উদাহরণ করে, আপনি এটিকে পথের সাথে মেলে এমন প্রথম নোডে চালাতে পারবেন। কিছু ধরণের রূপান্তর ফাংশন রয়েছে যা আপনার সম্ভবত এড়ানো উচিত কারণ জাভাস্ক্রিপ্টের ইতিমধ্যেই নিজস্ব টাইপ রূপান্তর সমস্যা রয়েছে। কিন্তু এমন সময় হতে পারে যখন আপনি একটি স্ট্রিংকে একটি সংখ্যায় রূপান্তর করতে চান যাতে এটিকে অন্য কোন সংখ্যার বিপরীতে পরীক্ষা করা যায়। কোন কিছুর ধরন সেট করে এমন ফাংশন হল বুলিয়ান, সংখ্যা, স্ট্রিং এবং নোড। এগুলি হল গুরুত্বপূর্ণ XPath ডেটাটাইপ। এবং আপনি কল্পনা করতে পারেন, এই ফাংশনগুলির বেশিরভাগই ডেটাটাইপগুলিতে ব্যবহার করা যেতে পারে যা DOM নোড নয়। উদাহরণস্বরূপ, সাবস্ট্রিং-আফটার একটি স্ট্রিং নেয় যেমনটি আমরা ইতিমধ্যে কভার করেছি, তবে এটি একটি href অ্যাট্রিবিউট থেকে স্ট্রিং হতে পারে। এটি শুধুমাত্র একটি স্ট্রিং হতে পারে:
const testSubstringAfter = document.queryXPaths("substring-after('hello world',' ')");
স্পষ্টতই, এই উদাহরণটি আমাদের ফলাফল অ্যারেটিকে ["world"] হিসাবে ফিরিয়ে দেবে। এটি কর্মে দেখানোর জন্য, আমি DOM নোড নয় এমন জিনিসগুলির বিরুদ্ধে ফাংশন ব্যবহার করে একটি ডেমো পৃষ্ঠা তৈরি করেছি: ব্রায়ান রাসমুসেনের পেন কোয়েরি এক্সপাথ [কাঁটাযুক্ত] দেখুন। আপনার অনুবাদ ফাংশনের আশ্চর্যজনক দিকটি নোট করা উচিত, যেটি হল যদি আপনার দ্বিতীয় আর্গুমেন্টে একটি অক্ষর থাকে (অর্থাৎ, আপনি অনুবাদ করতে চান এমন অক্ষরগুলির তালিকা) এবং অনুবাদ করার জন্য কোনো মিলিত অক্ষর না থাকলে, সেই অক্ষরটি আউটপুট থেকে সরানো হবে। সুতরাং, এই:
অনুবাদ('হ্যালো, আমার নাম ইনিগো মন্টোয়া, তুমি আমার বাবাকে মেরেছ, মরতে প্রস্তুত','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
…স্থান সহ স্ট্রিং এর ফলাফল: ["*****"]
এর মানে হল "a" অক্ষরটি একটি তারকাচিহ্ন (*) তে অনুবাদ করা হচ্ছে, কিন্তু লক্ষ্য স্ট্রিং দিয়ে অনুবাদ করা হয়নি এমন প্রতিটি অক্ষর সম্পূর্ণ মুছে ফেলা হয়েছে। হোয়াইটস্পেস আমরা বাকি আছেঅনূদিত "a" অক্ষরের মধ্যে। তারপর আবার, এই প্রশ্ন:
অনুবাদ('হ্যালো, আমার নাম ইনিগো মন্টোয়া, তুমি আমার বাবাকে মেরেছ, মরার জন্য প্রস্তুত','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************)
…এর কোন সমস্যা নেই এবং ফলাফল এইরকম দেখায়:
"**********************************************************"
এটি আপনাকে আঘাত করতে পারে যে জাভাস্ক্রিপ্টে XPath অনুবাদ ফাংশনটি ঠিক যা করে তা করার কোন সহজ উপায় নেই, যদিও অনেক ক্ষেত্রে ব্যবহারের ক্ষেত্রে, রেগুলার এক্সপ্রেশন সহ ReplaceAll এটি পরিচালনা করতে পারে। আপনি একই পদ্ধতি ব্যবহার করতে পারেন যা আমি প্রদর্শন করেছি, তবে আপনি যদি স্ট্রিংগুলি অনুবাদ করতে চান তবে এটি সাবঅপ্টিমাল। নিম্নলিখিত ডেমো একটি জাভাস্ক্রিপ্ট সংস্করণ প্রদান করার জন্য XPath এর অনুবাদ ফাংশন মোড়ানো: ব্রায়ান রাসমুসেনের পেন অনুবাদ ফাংশন [কাঁটাযুক্ত] দেখুন। কোথায় আপনি এই মত কিছু ব্যবহার করতে পারে? তিন-স্থানীয় অফসেট সহ সিজার সাইফার এনক্রিপশন বিবেচনা করুন (যেমন, 48 খ্রিস্টপূর্বাব্দ থেকে টপ-অফ-দ্য-লাইন এনক্রিপশন):
অনুবাদ করুন("সিজার রুবিকন অতিক্রম করার পরিকল্পনা করছে!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw")
ইনপুট টেক্সট "সিজার রুবিকন অতিক্রম করার পরিকল্পনা করছে!" ফলাফল "Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!" বিভিন্ন সম্ভাবনার আরেকটি দ্রুত উদাহরণ দিতে, আমি একটি মেটাল ফাংশন তৈরি করেছি যা একটি স্ট্রিং ইনপুট নেয় এবং টেক্সট ফেরত দেওয়ার জন্য একটি অনুবাদ ফাংশন ব্যবহার করে, যার মধ্যে umlauts নেওয়া সমস্ত অক্ষর রয়েছে। ব্রায়ান রাসমুসেনের পেন মেটাল ফাংশন [কাঁটাযুক্ত] দেখুন।
const metal = (str) => { ফিরতি অনুবাদ(str, "AOUaou","ÄÖÜäöü"); }
এবং, যদি "মটলি ক্রু রুলস, রক অন ডুডস!" লেখাটি দেওয়া হয়, তাহলে "মটলি ক্রু রুলস, রক ওন ডুডেস!" ফেরত দেয়। স্পষ্টতই, একজনের কাছে এই ফাংশনের সব ধরণের প্যারোডি ব্যবহার থাকতে পারে। যদি আপনিই হন, তাহলে এই TVTropes নিবন্ধটি আপনাকে প্রচুর অনুপ্রেরণা প্রদান করবে। XPath সহ CSS ব্যবহার করা XPath এর সাথে একসাথে CSS নির্বাচকদের ব্যবহার করার জন্য আমাদের প্রধান কারণ মনে রাখবেন: CSS একটি ক্লাস কী তা মোটামুটিভাবে বোঝে, যেখানে আপনি XPath এর সাথে সবচেয়ে ভালো করতে পারেন তা হল ক্লাস অ্যাট্রিবিউটের স্ট্রিং তুলনা। এটি বেশিরভাগ ক্ষেত্রেই কাজ করবে। কিন্তু আপনি যদি কখনও এমন পরিস্থিতির সম্মুখীন হন যেখানে, বলুন, কেউ .primaryLinks এবং .primaryLinks2 নামে ক্লাস তৈরি করেছে এবং আপনি .primaryLinks ক্লাস পেতে XPath ব্যবহার করছেন, তাহলে সম্ভবত আপনি সমস্যায় পড়বেন। যতক্ষণ না এর মতো নির্বোধ কিছুই নেই, আপনি সম্ভবত XPath ব্যবহার করবেন। কিন্তু আমি জানাতে দুঃখিত যে আমি এমন জায়গায় কাজ করেছি যেখানে লোকেরা এই ধরনের মূর্খ জিনিসগুলি করে। এখানে CSS এবং XPath একসাথে ব্যবহার করে আরেকটি ডেমো আছে। এটি দেখায় যে আমরা যখন নথির নোড নয় এমন একটি প্রসঙ্গ নোডে XPath চালানোর জন্য কোডটি ব্যবহার করি তখন কী ঘটে। ব্রায়ান রাসমুসেনের পেন css এবং xpath একসাথে [কাঁটাযুক্ত] দেখুন। CSS ক্যোয়ারী হল .relatedarticles a, যা একটি .relatedarticles ক্লাস বরাদ্দকৃত div-এ দুটি উপাদান নিয়ে আসে। এর পরে তিনটি "খারাপ" ক্যোয়ারী, অর্থাৎ, কন্টেক্সট নোড হিসাবে এই উপাদানগুলির সাথে চালানোর সময় আমরা যা করতে চাই তা করে না। আমি ব্যাখ্যা করতে পারি কেন তারা আপনার প্রত্যাশার চেয়ে ভিন্ন আচরণ করছে। প্রশ্নে তিনটি খারাপ প্রশ্ন হল:
//text(): নথির সমস্ত পাঠ্য ফেরত দেয়। //a/text(): নথির লিঙ্কের ভিতরের সমস্ত পাঠ্য ফেরত দেয়। ./a/text(): কোনো ফলাফল দেয় না।
এই ফলাফলের কারণ হল যখন আপনার প্রসঙ্গটি CSS কোয়েরি থেকে প্রত্যাবর্তিত একটি উপাদান, // পুরো নথির বিরুদ্ধে যায়। এটি XPath এর শক্তি; CSS একটি নোড থেকে পূর্বপুরুষের কাছে যেতে পারে না এবং তারপরে সেই পূর্বপুরুষের ভাইবোনের কাছে যেতে পারে না এবং সেই ভাইবোনের বংশধরের কাছে যেতে পারে না। কিন্তু XPath পারে। এদিকে, ./ বর্তমান নোডের বাচ্চাদের জিজ্ঞাসা করে, যেখানে ডট (.) বর্তমান নোডের প্রতিনিধিত্ব করে এবং ফরোয়ার্ড স্ল্যাশ (/) কিছু চাইল্ড নোডে যাওয়ার প্রতিনিধিত্ব করে — এটি কোনও বৈশিষ্ট্য, উপাদান বা পাঠ্য কিনা তা পথের পরবর্তী অংশ দ্বারা নির্ধারিত হয়। কিন্তু CSS ক্যোয়ারী দ্বারা নির্বাচিত কোন শিশু উপাদান নেই, এইভাবে সেই ক্যোয়ারীটিও কিছুই ফেরত দেয় না। সেই শেষ ডেমোতে তিনটি ভাল প্রশ্ন রয়েছে:
.//পাঠ্য(), ./text(), নরমালাইজ-স্পেস(./টেক্সট())।
নরমালাইজ-স্পেস ক্যোয়ারী XPath ফাংশন ব্যবহার প্রদর্শন করে, কিন্তু অন্যান্য কোয়েরিতে অন্তর্ভুক্ত একটি সমস্যার সমাধানও করে। এইচটিএমএল এই মত গঠন করা হয়:
সেলেনিয়াম ওয়েবড্রাইভারের সাথে আপনার বৈশিষ্ট্য পরীক্ষা স্বয়ংক্রিয় করা
প্রশ্নটি পাঠ্য নোডের শুরুতে এবং শেষে একটি লাইন ফিড প্রদান করে,এবং নরমালাইজ-স্পেস এটিকে সরিয়ে দেয়। যেকোন XPath ফাংশন ব্যবহার করা যা একটি ইনপুট XPath সহ বুলিয়ান ছাড়া অন্য কিছু প্রদান করে তা অন্যান্য ফাংশনে প্রযোজ্য। নিম্নলিখিত ডেমো উদাহরণগুলির একটি সংখ্যা দেখায়: ব্রায়ান রাসমুসেনের পেন এক্সপাথ ফাংশনের উদাহরণ [কাঁটাযুক্ত] দেখুন। প্রথম উদাহরণটি এমন একটি সমস্যা দেখায় যার জন্য আপনার সতর্ক হওয়া উচিত। বিশেষ করে, নিম্নলিখিত কোড:
document.queryXPaths("substring-after(//a/@href,'https://')");
…একটি স্ট্রিং প্রদান করে:
"www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/"
এটা জ্ঞান করে তোলে, ডান? এই ফাংশনগুলি অ্যারে ফেরত দেয় না বরং একক স্ট্রিং বা একক সংখ্যা দেয়। একাধিক ফলাফলের সাথে যেকোন জায়গায় ফাংশন চালানো শুধুমাত্র প্রথম ফলাফল প্রদান করে। দ্বিতীয় ফলাফল দেখায় আমরা আসলে কি চাই:
document.queryCSSSelectors("a").queryXPaths("substring-after(./@href,'https://')");
যা দুটি স্ট্রিংয়ের একটি অ্যারে প্রদান করে:
["www.smashingmagazine.com/2018/04/feature-testing-selenium-webdriver/","www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/"]
XPath ফাংশনগুলি জাভাস্ক্রিপ্টের ফাংশনের মতোই নেস্ট করা যেতে পারে। সুতরাং, যদি আমরা স্ম্যাশিং ম্যাগাজিন ইউআরএল স্ট্রাকচার জানি, তাহলে আমরা নিম্নলিখিতগুলি করতে পারি (টেমপ্লেট লিটারেল ব্যবহার করা বাঞ্ছনীয়): `অনুবাদ( সাবস্ট্রিং( substring-after(./@href, 'www.smashingmagazine.com/') ,9), '/', '')''
এটি কিছুটা জটিল হয়ে উঠছে যে এটি কী করে তা বর্ণনা করার জন্য মন্তব্যের প্রয়োজন: www.smashingmagazine.com/-এর পরে href অ্যাট্রিবিউট থেকে সমস্ত URL নিন, প্রথম নয়টি অক্ষর মুছে ফেলুন, তারপর ফরওয়ার্ড স্ল্যাশ (/) অক্ষরটিকে কিছুতেই অনুবাদ করুন যাতে শেষ হওয়া ফরোয়ার্ড স্ল্যাশ থেকে মুক্তি পাওয়া যায়৷ ফলস্বরূপ অ্যারে:
["ফিচার-টেস্টিং-সেলেনিয়াম-ওয়েবড্রাইভার","স্বয়ংক্রিয়-পরীক্ষা-ফলাফল-উন্নতি-অ্যাক্সেসিবিলিটি"]
আরও XPath ব্যবহারের ক্ষেত্রে XPath সত্যিই পরীক্ষায় উজ্জ্বল হতে পারে। কারণটি দেখা কঠিন নয়, কারণ XPath ব্যবহার করা যেতে পারে DOM-এর প্রতিটি উপাদান, DOM-এর যেকোনো অবস্থান থেকে, যেখানে CSS তা পারে না। আপনি অনেক আধুনিক বিল্ড সিস্টেমে ধারাবাহিকভাবে CSS ক্লাসের উপর নির্ভর করতে পারবেন না, কিন্তু XPath-এর সাহায্যে, আমরা পরিবর্তনশীল DOM কাঠামো নির্বিশেষে একটি উপাদানের পাঠ্য বিষয়বস্তু কী তা নিয়ে আরও শক্তিশালী মিল তৈরি করতে সক্ষম। এমন কৌশলগুলির উপর গবেষণা করা হয়েছে যা আপনাকে স্থিতিস্থাপক XPath পরীক্ষা করতে দেয়। কোনো কিছুর নাম পরিবর্তন করা বা সরানো হয়েছে বলে সিএসএস নির্বাচক আর কাজ করে না বলে পরীক্ষাগুলো ফ্লেক হওয়া এবং ব্যর্থ হওয়ার চেয়ে খারাপ আর কিছুই নয়। XPath একাধিক লোকেটার নিষ্কাশনে সত্যিই দুর্দান্ত। একটি উপাদানের সাথে মেলে XPath প্রশ্নগুলি ব্যবহার করার একাধিক উপায় রয়েছে৷ CSS এর ক্ষেত্রেও একই কথা। কিন্তু XPath ক্যোয়ারীগুলি আরও টার্গেটেড উপায়ে জিনিসগুলির মধ্যে ড্রিল করতে পারে যা যা ফিরে আসে তা সীমিত করে, আপনাকে একটি নির্দিষ্ট মিল খুঁজে পেতে অনুমতি দেয় যেখানে বেশ কয়েকটি সম্ভাব্য মিল থাকতে পারে। উদাহরণ স্বরূপ, আমরা XPath ব্যবহার করে একটি নির্দিষ্ট h2 উপাদান ফেরত দিতে পারি যা একটি div-এর মধ্যে থাকে যা অবিলম্বে একটি ভাইবোন ডিভকে অনুসরণ করে, যার ফলে, এটিতে একটি data-testID="leader" বৈশিষ্ট্য সহ একটি চাইল্ড ইমেজ উপাদান রয়েছে:
এই শিরোনামটি পান না
এই শিরোনামটিও পাবেন না
লিডার ইমেজের হেডার
এই প্রশ্ন: document.queryXPaths(` //div[ নিম্নলিখিত ভাইবোন::div[1] /img[@data-testID='লেডার'] ] /h2/ পাঠ্য() `);
সবগুলো কিভাবে একত্রিত হয় তা দেখতে একটি ডেমো দেখা যাক: ব্রায়ান রাসমুসেনের পেন কমপ্লেক্স H2 কোয়েরি [কাঁটাযুক্ত] দেখুন। তাই, হ্যাঁ। XPath ব্যবহার করে একটি পরীক্ষায় যেকোনো উপাদানের অনেক সম্ভাব্য পথ রয়েছে। XSLT 1.0 অবচয় আমি প্রথম দিকে উল্লেখ করেছি যে Chrome টিম ব্রাউজার থেকে XSLT 1.0 সমর্থন সরানোর পরিকল্পনা করছে। এটি গুরুত্বপূর্ণ কারণ XSLT 1.0 দস্তাবেজ রূপান্তরের জন্য XML-কেন্দ্রিক প্রোগ্রামিং ব্যবহার করে যা, XPath 1.0 এর উপর নির্ভর করে, যা বেশিরভাগ ব্রাউজারে পাওয়া যায়। এটি ঘটলে, আমরা XPath-এর একটি মূল উপাদান হারাবো। কিন্তু XPath পরীক্ষা লেখার জন্য সত্যিই দুর্দান্ত, আমি মনে করি যে XPath সামগ্রিকভাবে শীঘ্রই অদৃশ্য হয়ে যাবে। এটি বলেছে, আমি লক্ষ্য করেছি যে কোনও বৈশিষ্ট্যটি সরিয়ে নেওয়া হলে লোকেরা তাতে আগ্রহী হয়। এবং XSLT 1.0 অবমূল্যায়িত হওয়ার ক্ষেত্রে এটি অবশ্যই সত্য। অবলোপনের বিরুদ্ধে যুক্তিতে ভরা হ্যাকার নিউজে একটি সম্পূর্ণ আলোচনা চলছে। পোস্টটি নিজেই XSLT এর সাথে একটি ব্লগিং ফ্রেমওয়ার্ক তৈরি করার একটি দুর্দান্ত উদাহরণ। আপনিআলোচনাটি নিজের জন্য পড়তে পারেন, তবে এই ধরণের কেসগুলি পরিচালনা করতে XLST-এর জন্য জাভাস্ক্রিপ্ট কীভাবে ব্যবহার করা যেতে পারে তা বোঝা যায়। আমি পরামর্শও দেখেছি যে ব্রাউজারগুলিকে SaxonJS ব্যবহার করা উচিত, যা JavaScript এর Saxon XSLT, XQUERY, এবং XPath ইঞ্জিনগুলির একটি পোর্ট। এটি একটি আকর্ষণীয় ধারণা, বিশেষ করে যেমন Saxon-JS এই স্পেসিফিকেশনগুলির বর্তমান সংস্করণটি প্রয়োগ করে, যেখানে এমন কোনও ব্রাউজার নেই যা XPath বা XSLT-এর 1.0 এর বাইরে কোনও সংস্করণ প্রয়োগ করে এবং XQuery প্রয়োগ করে না৷ আমি Saxonica-তে Norm Tovey-Walsh-এর কাছে পৌঁছেছি, SaxonJS এবং স্যাক্সন ইঞ্জিনের অন্যান্য সংস্করণের পিছনের কোম্পানি। তিনি বললেনঃ "যদি কোন ব্রাউজার বিক্রেতা ব্রাউজারে আধুনিক এক্সএমএল প্রযুক্তিগুলিকে একীভূত করার জন্য স্যাক্সনজেএসকে একটি সূচনা পয়েন্ট হিসাবে নিতে আগ্রহী হন তবে আমরা তাদের সাথে এটি নিয়ে আলোচনা করতে পেরে রোমাঞ্চিত হব।"- নর্ম টোভে-ওয়ালশ
কিন্তু এছাড়াও যোগ করা হয়েছে: "আমি খুব অবাক হব যদি কেউ মনে করে যে স্যাক্সনজেএসকে তার বর্তমান আকারে নেওয়া এবং ব্রাউজার বিল্ডে অপরিবর্তিত রেখে দেওয়া আদর্শ পদ্ধতি হবে৷ একজন ব্রাউজার বিক্রেতা, প্রকৃতির দ্বারা তারা ব্রাউজারটি তৈরি করে, আমরা 'বাইরে থেকে' যতটা পারি তার চেয়ে অনেক গভীর স্তরে ইন্টিগ্রেশনের কাছে যেতে পারে।"- নর্ম টোভে-ওয়ালশ
এটা লক্ষণীয় যে Tovey-Walsh-এর মন্তব্য XSLT অবচয় ঘোষণার প্রায় এক সপ্তাহ আগে এসেছিল। উপসংহার আমি এবং যেতে পারে. কিন্তু আমি আশা করি এটি XPath-এর শক্তি প্রদর্শন করেছে এবং আপনাকে প্রচুর উদাহরণ দিয়েছে যা প্রদর্শন করে কিভাবে এটিকে ব্যবহার করতে হয় মহান জিনিসগুলি অর্জনের জন্য। এটি ব্রাউজার স্ট্যাকের পুরানো প্রযুক্তির একটি নিখুঁত উদাহরণ যা আজও প্রচুর উপযোগিতা রয়েছে, এমনকি যদি আপনি জানেন না যে এটি বিদ্যমান ছিল বা এটির জন্য পৌঁছানোর কথা কখনও বিবেচনা করেননি। আরও পড়া
"প্রাকৃতিক ভাষার সাথে অটোমেটেড ওয়েব টেস্টের স্থিতিস্থাপকতা বৃদ্ধি করা" (ACM ডিজিটাল লাইব্রেরি) Maroun Ayli, Youssef Bakouny, Nader Jalloul, এবং Rima Kilany দ্বারা এই নিবন্ধটি স্থিতিস্থাপক পরীক্ষা লেখার জন্য অনেক XPath উদাহরণ প্রদান করে৷ XPath (MDN)এটি শুরু করার জন্য একটি চমৎকার জায়গা যদি আপনি XPath কিভাবে কাজ করে তার বিস্তারিত একটি প্রযুক্তিগত ব্যাখ্যা চান। XPath টিউটোরিয়াল (ZVON)আমি এই টিউটোরিয়ালটিকে আমার নিজের শেখার ক্ষেত্রে সবচেয়ে সহায়ক বলে মনে করেছি, অনেক উদাহরণ এবং স্পষ্ট ব্যাখ্যার জন্য ধন্যবাদ। XPather এই ইন্টারেক্টিভ টুলটি আপনাকে কোডের সাথে সরাসরি কাজ করতে দেয়।
