Skip to main content

जावास्क्रिप्‍ट सीखें हिन्‍दी में पाठ-8 (जावास्क्रिप्‍ट सेलेक्‍टर) - Learn JavaScript in Hindi Lesson 8 (JavaScript Selector)

By

    ।। जावास्क्रिप्‍ट सेलेक्‍टर ।।
       ||  JavaScript Selector  ||

जावास्क्रिप्‍ट सेलेक्‍टर वो कोडपंक्तियां होती हैं जिनसे हम जावास्क्रिप्‍ट में एचटीएमएल के एलीमेण्‍ट सेलेक्‍ट करके उनमें इच्‍छानुसार परिवर्तन कर सकते हैं ।

उदाहरण -

<!doctype html>
<head>
<title>Learn Js</title>
</head>
<body>
<p id="p1">This is a Paragraph </p>

<button onclick="changepara();">Click Me</button>
<script>
function changepara()
{
document.getElementById("p1").innerHTML = "The Paragraph Text will be Changed";
}
</script>
</body>
</html>

उपयुक्‍त उदाहरण में हमने एक पैराग्राफ बनाया है जिसकी आईडी पी1 रखी है । इस पैराग्राफ के अन्‍दर एक वाक्‍य लिखा है । पैराग्राफ के वाक्‍य को बदलने के लिये हमें पैराग्राफ को सेलेक्‍ट करना है जिसके लिये हमने document.getElementById("p1") सेलेक्‍टर का प्रयोग किया है । इस सेलेक्‍टर के प्रयोग से हम किसी भी एलीमेण्‍ट को उसकी आईडी के द्वारा सेलेक्‍ट कर सकते हैं । ध्‍यान रहे इस सेलेक्‍टर के प्रयोग के लिये आपके एलीमेण्‍ट में आईडी डिफाइन होना अनिवार्य है ।

इसी तरह जावास्क्रिप्‍ट में विभिन्‍न एलीमेण्‍ट्स, टैग्‍स आदि को सेलेक्‍ट करने के लिये सेलेक्‍टर बनाये गये हैं । ये सेलेक्‍टर निम्‍नलिखित हैं ।

document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()
document.querySelector()
आइये इनमें से प्रत्‍येक का प्रयोग करके देखते हैं ।

जावास्क्रिप्‍ट एचटीएमएल आईडी सेलेक्‍टर ।। 
JavaScript HTML #id Selector 

जावास्क्रिप्‍ट के द्वारा एचटीएमएल एलीमेण्‍ट्स को उनकी आईडी से सेलेक्‍ट करने के लिये हम इस सेलेक्‍टर कोड का प्रयोग करते हैं ।
1- इसके लिये सबसे पहले हमें अपने टैग को एक आईडी देनी होती है ।
  उदाहरण - <div id="d1">Your Text Here</div>
2- अब हम आईडीसेलेक्‍टर स्क्रिप्‍ट से उस टैग की आईडी सेलेक्‍ट करते हैं जिसमें हमें परिवर्तन करना है ।
उदाहरण - <script> document.getElementById("d1"); </script>
3- एचटीएमएल आईडी को सेलेक्‍ट कर लेने के बाद हम उसमें वांछित परिवर्तन करने के लिये अपना वांछित कोड लिखते हैं ।

उदाहरण -
<script> document.getElementById("d1").innerHTML = "Your New Text Will Go Here"; </script>

अब इस पूरे कोड को एक करके देखते हैं -

<!doctype html>
<head>
<title>Learn Js</title>
</head>
<body>
<div id="d1">Your Text Here</div>

<script>
document.getElementById("d1").innerHTML = "Your New Text Will Go Here";
</script>

</body>
</html>

अब इसे होम.एचटीएमएल नाम से सुरक्षित करें और रन कराएँ । आपका Your Text Here वाक्‍य बदलकर Your New Text Will Go Here हो जाएगा ।

आगे के पाठों में हम सभी सेलेक्‍टर्स का प्रयोग करना सीखेंगे ।।

Contact us for Very Cheap Website Designing in Akbarpur, Website Designing in Ambedkar nagar, Website in Faizabad, Website in Barabanki, Website in Gonda, Website in Sultanpur, Website in Lucknow, Website in Azamgarh and other nearby Cities

Labels:

Comments

Post a Comment

Popular posts from this blog

एजाक्‍स तकनीकि - एजाक्‍स सीखें हिन्‍दी में ।

By
एजाक्‍स कोई स्‍वतन्‍त्र तकनीकि नहीं अपितु अन्‍तर्सम्‍बन्धित तकनीकों का वर्ग है । एजाक्‍स के अन्‍तर्गत मुख्‍य रूप से निम्‍न तकनीकि (भाषाएं) रखी जा सकती हैं । एचटीएमएल सीएसएस एक्‍सएमएल जेएसऑन जावास्क्रिप्‍ट XMLHttpRequest आब्‍जेक्‍ट की प्रापर्टीज  - onReadyStateChange - जब भी रेडीस्‍टेट बदलता है तो इसे कॉल किया जाता है । इसे synchronous requests के साथ प्रयोग नहीं करना चाहिए । readyState - यह विभिन्‍न कार्यों को सम्‍पादित करने के लिये प्रयुक्‍त होता है । इसे सोपान क्रम में UNOPENED, OPENED, HEADERS_RECEIVED, LOADING, DONE तरह रखा जा सकता है । reponseText - रिस्‍पान्‍स को टेक्‍स्‍ट के रूप में प्रकट करता है । responseXML - रिस्‍पान्‍स को एक्‍सएमएल के रूप में प्रकट करता है । XMLHttpRequest आब्‍जेक्‍ट के महत्‍वपूर्ण मेथड - void open(method, URL) - अनुरोध को गेट अथवा पोस्‍ट मेथड के आधार पर दिये हुए यूआरएल को भेजता है । void open(method, URL, async) - उपयुक्‍त की ही भॉंति इसका भी कार्य है केवल asynchronous है या नहीं इसका विवरण भी देता है । void open(method, ...
26 comments
Read more

सीएसएस का प्रयोग (How to Use CSS)

By
     सीएसएस का प्रयोग अत्‍यन्‍त सरल है । सीएसएस का प्रयोग आपका बहुत सारा समय व आपकी बहुत सारी मेहनत बचाने के साथ ही साथ आपके पेज को बेहतरीन सुन्‍दरता प्रदान करता है । इसके प्रयोग की तीन विधियाँ हैं । ये तीनों ही विधियाँ प्रयोज्य हैं अर्थात् इनमें से किसी भी विधि का प्रयोग आपको वांछित परिणाम प्रदान कर सकता है । सीएसएस प्रयोग विधि सीएसएस का प्रयोग निम्‍नलिखित तीन विधियों से किया जा सकता है । सीएसएस को एक अलग सीएसएस फाइल में लिखकर उसे एचटीएमएल पेज से लिंक करना । सीएसएस को एचटीएमएल पेज के हेड सेक्‍सन के अन्‍तर्गत स्‍टाइल टैग के अन्‍दर लिखना । सीएसएस को किसी भी टैग या एलीमेण्‍ट के अन्‍दर सीधे लिखना । सीएसएस का बाह्य प्रयोग -       सीएसएस को बाहर से लिंक करना सबसे बेहतरीन तरीका है । इस तरीके से आपकी कोडिंग फाइल बहुत बोझिल और बडी होने से बच जाती है । यदि हमें एक बहुत सारे ब्‍लाक्‍स का पेज बनाना है और हम हर ब्‍लाक को अलग अलग रंगों व तरीकों से सजाते हैं तो निश्चित ही हमारे पेज की कोडिंग फाइल बहुत बडी हो जायेगी जिसे सुधार कर...
3 comments
Read more

एचटीएमएल सीखें हिन्‍दी में (Learn Html in Hindi)

By
मित्रों     अबतक हमने एचटीएमएल के विभिन्‍न विभागों को सीखा । लगभग सम्‍पूर्ण एचटीएमएल ट्यूटोरियल जो कि एक शुरुआती छात्र के लिये आवश्‍यक है यहाँ पर प्रस्‍तुत किया गया है । इससे अधिक व नवीनतम अपडेट्स के विषय में जानने के लिये एचटीएमएल की मूल वेबसाइट पर जा सकते हैं । जहाँ आप सम्‍पूर्ण एचटीएमएल इसकी समस्‍त बारीकियों सहित जान पायेंगे । किन्‍तु यहाँ जितना प्रस्‍तुत किया गया है वह एक अच्‍छे वेब डेवलपर के लिये पर्याप्‍त है ।  यहाँं अबतक प्रस्‍तुत सम्‍पूर्ण एचटीएमएल ट्यूटोरियल को एकसाथ प्रस्‍तुत कर रहे हैं । जिसके लिये आपको बार-खोजना न पडे । एचटीएमएल सीखें - हिन्‍दी में ।।   एचटीएमएल संरचना । एचटीएमएल हेड सेक्‍सन (शीर्ष विभाग) ।।   ए‍चटीएमएल हेड सेक्‍सन (मेटा, लिंक, स्क्रिप्‍ट, स्‍टाइल, बेस, टाइटिल) परिचय ।   एचटीएमएल बॉडी सेक्‍सन ।। DIV एलीमेण्‍ट का प्रयोग करके वेब टेम्‍प्‍लेट बनाना DIV एलीमेण्‍ट ।।   कमेण्‍ट ।।   DIV (डीआईवी)   ID & CLASS SELECTOR (आईडी व क्‍लास सेलेक्‍टर) II   सीएसएस स्‍टाइल (CSS Style)।। ...
11 comments
Read more