वेब डेवलपमेंट पर अंकुर गुप्ता: आइये jQuery सीखें

इस प्रविष्टि में हम यह मान के चल रहे हैं कि आपको सामान्य HTML,CSS तथा Javascript का ज्ञान है. आपको केवल सामान्य ज्ञान की जरूरत है. इनमें विशेषज्ञता की आवश्यकता नही है. आपको कम से कम इतना मालूम होना चाहिये कि एक html पेज कैसे बनाते हैं और उसे ब्राउजर पर कैसे देखना है. यहां आपको निम्नलिखित सलाहें दी जाती हैं:

आप फ़ायरफ़ाक्स ब्राउजर का प्रयोग करें. http://www.mozilla.com/en-US/firefox/personal.html
फ़ायरफ़ाक्स में Firebug एक्सटेंशन इंस्टाल करें https://addons.mozilla.org/en-US/firefox/addon/1843
कोडिंग के लिये Notepad++ उपयोग करें. http://notepad-plus.sourceforge.net/uk/site.htm

jQuery क्या है?

jQuery एक जावास्क्रिप्ट लाइब्रेरी या यूं कहें कि एक जावास्क्रिप्ट फ़्रेमवर्क है. इसके जरिये आप क्रास ब्राउजर(यानि कि जो हर ब्राउजर में समान रूप से चले) जावास्क्रिप्ट एप्लिकेशन बना सकते हैं.

असल में jQuery में बहुत सारा कोड पहले से ही लिख दिया गया है. आपको बस उसे फ़ंग्शन उपयोग करने होते हैं. इससे आपको कम कोड लिखना पड़ता है और वह अधिक पठनीय हो जाता है.

अलग अलग ब्राउजरों में जावास्क्रिप्ट के चलने के तरीके में कुछ कुछ फ़र्क होता है. सामान्यत: डेवलपरों के लिये ये सिरदर्द बन जाता है. क्योंकि उन्हे एक ही प्रोग्राम के कई संस्करण अलग अलग ब्राउजरों के लिये लिखने होते हैं. jQuery में ऐसा आपको नही करना पड़ता है. आप एक ही बार लिखते हैं और वह हर ब्राउजर में काम करता है.

jQuery डाउनलोड करना.

Jquery को आप jquery.com से मुफ़्त डाउनलोड कर सकते हैं. ये एक छोटी सी js फ़ाइल के रूप में आपको मिलेगी.

jQuery को अपने HTML पेज में उपयोग करना

आपको अपने HTML पेज के HEAD टैग के भीतर <script src= में jQuery की फ़ाइल का पूरा पता भरना होता है.

अब अपनी <body> टैग या <head> टैग के भीतर एक और <script> टैग जोड़िये. जैसे:

अब हम jQuery के उपयोग के लिये तैयार हैं.

अपने <script> टैग में ये लिखें:

$(document).ready(function() {
// do stuff when DOM is ready
});

ये $(document).ready, window.onload के स्थान पर प्रयोग किया जाता है.

window.onload तब रन होता है जब आपका पेज पूरी तरह से लोड हो चुका हो. पर अगर आपके पेज में खूब सारे बड़े बड़े चित्र हों तो आपके पेज को लोड होने में भी समय लगेगा और आपका कोड भी देरी से शुरू होगा. जिससे पेज खराब दिख सकता है. अत: इस समस्या को हल करने के लिये jQuery आपको $(document).ready का फ़ंग्शन उपलब्ध कराता है. इससे आपका कोड पेज के तैयार होते ही रन होना शुरू हो जायेगा.

jQuery Selectors

jQuery आपके पेज में से किसी चीज को ढूढ़ने के लिये "CSS Selectors" का उपयोग करता है. अगर आप CSS का ज्ञान रखते हैं तो इसे आप बड़ी ही आसानी से समझ सकते हैं.

उदाहरण के लिये अगर हमारे पेज में निम्नलिखित कोड दिया है:

तो अगर box1 नाम के आई डी वाले टैग को चुनना है तो इसे कुछ ऐसे लिखेंगे.
$("#box1")

अगर google क्लास वाले टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“.google”)

अगर सभी "Div” टैगों को चुनना है तो इसे ऐसे लिखेंगे
$(“div”)

सेलेक्टर्स jQuery का बहुत ही महत्वपूर्ण हिस्सा हैं. अत: इन्हे जरूर समझ लें. मैंने केवल तीन सेलेक्टर ऊपर बताये हैं पर jQuery, CSS में इस्तेमाल होने वाले सभी सेलेक्टरों को स्वीकार करता है.

Hello Word

Hello World के बिना भी कोई प्रोग्रामिंग सीखना शुरू करता है क्या? वैसे ये एक परंपरा बन गई है कि जब प्रोग्रामिंग सीखने का श्रीगणेश करना हो तो उसे Hello World से शुरू करते हैं.

हम एक छोटा सा प्रोग्राम बनाने जा रहे हैं जिसमें एक बटन होगी और उसमें क्लिक करने पर Hello World एक एलर्ट बाक्स में दिखाई देगा.

तो शुरू करते हैं.

१.सबसे पहले अपने पेज में एक इनपुट बटन बनायेंगे:

२. अब jQuery की कोडिंग शुरू करेंगे निम्नलिखित कोड को अपने पेज की बाडी टैग के भीतर कापी पेस्ट कर दीजिये.

पूरा कोड कुछ इस प्रकार दिखाई देगा.

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="button" id="btn_clickme" value="Click Me" />
<script type="text/javascript">
$(document).ready(function(){
$("#btn_clickme").click(function(){
alert("Hello World");
});
});
</script>
</body>
</html>

अब अपने पेज को ब्राउजर में देखिये.

आपको क्लिक मी के नाम का एक बटन दिखाई देगा जिसमें क्लिक करने पर एक बाक्स खुलेगा जिसमें "Hello World” लिखा मिलेगा.

तो आखिर इस कोड से क्या और कैसे हुआ?

$(document).ready(function(){ वाली बात तो आपको पहले ही बता चुका हूं उसके आगे एक लाइन लिखी है:

f$("#btn_clickme").click(function(){

इसमें सबसे पहले "selector” लिखा गया है जो कि #btn_clickme है. यानि कि हम एक ऐसे Element को खोज रहे हैं जिसका ID “btn_clickme” को.

फ़िर एक बिंदी के बाद click लिखा है. इसका मतलब इवेंट से है. यानि कि #btn_clickme में जब क्लिक किया जाये.

अब आगे function(){ लिखा है. यानि कि #btn_clickme में जब क्लिक किया जाये तो क्या हो.

अब इसके आगे एक Alert फ़ंग्शन है जिसकी वजह से ये बाक्स दिखता है.

इस पूरे कोड का मतलब है कि जब #btn_clickme नाम के ID वाले Element में Clickकिया जाये तो Alert बाक्स वाला कोड रन किया जाये.

jQuery में और भी इवेंट उपलब्ध हैं जैसे dblclick , keydown , focus आदि.

आपने जो ऊपर उदाहरण देखा है उसे नीचे लिखे दो तरीकों से भी किया जा सकता है जैसे:

तथा

<input type="button" id="btn_clickme" value="Click Me" onclick=”doit();” />
<script type=”text/javascript”>
function doit(){
alert(“Hello World”);
}
</script>

पर इस तरह के कोड में आपने देखा है कि हमें HTML में ही onclick एट्रीब्यूट जोड़ना पड़ता है. इससे कुछ मात्रा में जावास्क्रिप्ट HTML Markup में भी चली जाती है. आप ऐसा कर सकते हैं पर ऐसा करना "गुड प्रैक्टिस” नही माना जाता है. हमेशा प्रयास यही होना चाहिये कि स्टाइल शीट्स, मार्कअप और जावास्क्रिप्ट कोडिंग एक दूसरे से एकदम अलग अलग हों. इसीलिये jQuery से ऐसा करना आसान हो जाता है.

इस प्रविष्टि का उद्देश्य आपको jQuery की आधारभूत बातों से परिचित करवाना था. jQuery में और भी बहुत कुछ है जिसकी चर्चा हम आगे करेंगे.