स्व-विकास के लिए असाइनमेंट: यादृच्छिक स्ट्रिंग्स और उनके द्वारा चयन की सूची के साथ HTML फॉर्म

मैं खाबरोवस्क निवासियों और हबर मेहमानों के ध्यान में लाना चाहता हूं जो विकास के दृश्य-पक्ष में आत्म-विकास के लिए एक कार्य है। यह कार्य उन कलाकारों के लिए किया जाता है जो फ्रंटएंड प्रोग्रामिंग को समझना शुरू करते हैं और एक ब्राउज़र में बुनियादी प्रोग्रामिंग तंत्र से परिचित होने के लिए स्थापित किए जाते हैं। आवश्यक प्रौद्योगिकियाँ: एचटीएमएल, सीएसएस, जावास्क्रिप्ट (वेनिला)।



कार्य विशेष रूप से किसी भी अतिरिक्त उपकरण के न्यूनतम कनेक्शन के साथ बुनियादी तकनीकों को जितना संभव हो उतना समझने के लिए डिज़ाइन किया गया है। अनिवार्य रूप से, केवल एक ब्राउज़र और कोड संपादक की आवश्यकता होती है; बैकेंड की ओर प्रसंस्करण की आवश्यकता के बिना कोई प्रारंभिक जोड़तोड़ नहीं। कौन उत्पादन से परिचित होने की परवाह करता है - बिल्ली में आपका स्वागत है!

उपस्थिति के लिए सिफारिशें

लाइनों की एक सूची और एक फिल्टर पैनल से मिलकर एक फॉर्म बनाएं। फॉर्म का उदाहरण:



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

कार्यात्मक आवश्यकताओं

सूची लाइनें और उनकी सामग्री पृष्ठ खोलने पर उत्पन्न होती हैं (200 से अधिक की एक यादृच्छिक संख्या)। प्रत्येक पंक्ति के मार्कअप और सामग्री को स्रोत कोड में निरंतर संग्रह में पहले से सूचीबद्ध गुणों से यादृच्छिक पर एकत्र किया जाना चाहिए, संग्रह उन्नत चयन फ़िल्टर नंबर 1, 2, 3, 4 के अनुरूप हैं (नीचे अधिक विवरण में वर्णित किया गया है, संग्रह में तत्वों के मूल्य और उनकी संख्या निष्पादक द्वारा निर्धारित की गई हैं)। तार कोडांतरण के लिए संग्रह वस्तुओं का एक यादृच्छिक चयन यादृच्छिक संख्याओं (यादृच्छिक) की पीढ़ी पर आधारित है।

सूची की प्रत्येक पंक्ति पर एक विशिष्ट पहचानकर्ता और दो टैग प्रदान करें:
1. पहचानकर्ता का मूल्य पहचानकर्ता विशेषता में लिखा गया है और स्ट्रिंग की सामग्री की शुरुआत में प्रदर्शित किया जाता है (इसे एक अलग टैग में लपेटा जा सकता है);
2. पहला टैग यादृच्छिक चयन करने के लिए है, फ़िल्टर द्वारा प्रदान किए गए लोगों से, उदाहरण के लिए, लेबल, स्पैन, डि, पी या लाइक, एक यादृच्छिक, नेत्रहीन अलग-अलग वर्ग (उदाहरण के लिए, पृष्ठभूमि के रंग, फ़ॉन्ट, या जैसे, वर्गों को सीएसएस में पूर्वनिर्धारित किया जाना चाहिए और स्थिरांक के संग्रह में सूचीबद्ध किया जाना चाहिए) संबंधित फ़िल्टर के लिए), सामग्री में टैग और उसके वर्ग का नाम प्रदर्शित करता है; एक साथ कई अलग-अलग वर्गों के यादृच्छिक प्रतिस्थापन, अलग-अलग संख्याओं में, 1 से कम नहीं, स्वागत किया जाता है;
3. दूसरा टैग एक यादृच्छिक प्रकार (प्रकार विशेषता), यादृच्छिक मूल्य (शीर्षक में डुप्लिकेट मूल्य), यादृच्छिक उपस्थिति / ब्लॉक चिह्न की अनुपस्थिति, यादृच्छिक उपस्थिति / केवल-पढ़ने के निशान की अनुपस्थिति के साथ इनपुट है।

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

जब फ़िल्टरिंग फ़ील्ड को फिर से बदल दिया जाता है, तो सूची को स्रोत सूची से प्रविष्टियों को प्रदर्शित करना चाहिए जो नए चयनित फ़िल्टर कॉन्फ़िगरेशन के लिए उपयुक्त हैं (स्रोत सूची का फ़िल्टरिंग फिर से होना चाहिए, स्रोत रिकॉर्ड खो नहीं जाना चाहिए)।

पहचानकर्ता द्वारा चयन मोड में , फ़िल्टर पैनल में पंक्ति पहचानकर्ता (इनपुट फ़ील्ड) द्वारा चयन फ़ील्ड होना चाहिए।
उन्नत चयन मोड में, निम्न फ़िल्टर फ़िल्टर पैनल पर होने चाहिए:
1. पहले टैग (संग्रह से चयन) द्वारा;
2. पहले टैग (संग्रह से चयन) के वर्ग द्वारा;
3. इनपुट टैग के प्रकार (संग्रह से चयन);
4. इनपुट टैग (संग्रह से चयन) के मूल्य से;
5. इनपुट टैग (मान हां / ना का विकल्प) को अवरुद्ध करके;
6. केवल इनपुट टैग पढ़ने के लिए उपलब्धता द्वारा (मानों की पसंद हाँ / नहीं)।

इसके साथ ही

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

मुझे आशा है कि पाठक पाएंगे कि वर्णित कार्य आत्म-विकास में उपयोगी होगा या किसी की सिफारिश के लिए उपयुक्त होगा।

मैं आपके पेशेवर कैरियर में सफलता की कामना करता हूं!