शनिवार, 26 सितंबर 2009

आइये jQuery सीखें - 5 – Manipulation(4)

आज मैं आपको Clone के बारे में बताने जा रहा हूं. Clone फ़ंग्शन jQuery में किसी भी एलिमेंट का हू ब हू हमशक्ल बना देता है. यहां तक कि उसकी प्रापर्टीज़, इवेंट्स आदि को भी कापी कर देता है.

निम्नलिखित कोड को अपने HTML पेज में कापी पेस्ट कीजिये:

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button type="button" id="btn_clickme">Clone Me</button>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(this).clone().insertAfter(this);
    });
});
</script>
</body>
</html>

अब इसमें जो लाइन मोटे अक्षरों में लिखी है उसमें ध्यान दीजिये.

        $(this).clone().insertAfter(this);

this: यानि कि वो बटन जिसमें क्लिक किया जा रहा है.

clone(). यानि कि एक डुप्लीकेट बनाया जा रहा है

insertAfter(this): यानि कि जिस बटन में क्लिक किया जा रहा है उसी के बगल में clone को जोड़ दिया जाए.

इस पेज को जब आप ब्राउजर में देखेंगे तो केवल एक बटन दिखेगा. लेकिन जब आप उसमें क्लिक करेंगे तो उसके डुप्लिकेट बनना शुरू हो जायेंगे. कु़छ इस तरह:

image

लेकिन अभी एक दिक्कत है. अभी केवल एक ही बटन पर क्लिक करने से क्लोन बन रहे हैं. जो बटने क्लोन बन चुकी हैं उनमें क्लिक करने से कुछ नही होता है. इसका मतलब है कि बटन या यूं कहें कि एलिमेंट तो क्लोन हो रहा है पर उसका व्यवहार नही.

उसके व्यवहार को भी क्लोन करने के लिये केवल इतना करना है कि clone() फ़ंग्शन में true पैरामीटर को गुजारना है:

$(this).clone(true).insertAfter(this);

अब फ़िर से अपने पेज को देखिये. क्लोन बनी हुई बटने अपना भी क्लोन बनाने में सक्षम हो जायेंगी.

आइये jQuery सीखें - 4 – Manipulation(3)

आज हम कुछ अलग करने वाले हैं. हम एक बटन बनायेंगे जिसमें क्लिक करते ही वो अपना बटन स्वरूप खोकर एक डिव टैग का रूप धारण कर लेगी.

इसके लिये सबसे पहले एक HTML फ़ाइल बनायें और उसमें ये कोड कापी पेस्ट करें

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
  div {
  border: 2px solid blue;
  width: 200px;
  height: 30px;
  }
  p { background:yellow; margin:4px; }
</style>

</head>

<body>
<button type="button" id="btn_clickme1">First Button</button>
<button type="button" id="btn_clickme2">Second Button</button>
<button type="button" id="btn_clickme3">Third Button</button>

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
       //आपका कोड यहां रहेगा

    });
});
</script>
<p>Mera</p>
<p>Bharat</p>
<p>Mahan</p>
</body>
</html>

 

 

replaceWith(content)

हम इस बार ये करेंगे कि जैसे ही कोई उपयोगकर्ता बटन पर क्लिक करे वह बटन Div टैग में बदल जाये. ऐसा करने के लिये हमें replaceWith() फ़ंग्शन का प्रयोग करना पड़ेगा. यानि कि क्लिक मी बटन के फ़ंग्शन के भीतर आपको $(this).replaceWith("<div>You Clicked Me!</div>"); लिखना है.

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

      $(this).replaceWith("<div>You Clicked Me!</div>");

});

अब ये “this” क्या बला है? पहले तो केवल css सेलेक्टर ही थे. चूंकि हमने क्लिक इवेंट हैंडलर में सेलेक्टर button टैग को रखा है इसलिये यह पेज में मौजूद सभी बटनों को चुन लेता है. जब किसी बटन में क्लिक किया जाता है तो ये “this” इस क्लिक किये गये बटन को चुनने का काम करता है.

फ़ायरबग में परिणाम कुछ ऐसे दिखेगा

पहले

image

बाद में (एक बटन को क्लिक करने के बाद)

image

replaceAll(selector)

यह फ़ंग्शन भी replaceWith की तरह ही कार्य करता है बस पैरामीटर बदल जाते हैं.

जो काम ऊपर में हमने इस कोड से किया है

$(this).replaceWith("<div>You Clicked Me!</div>");

इसी काम को हम निम्नलिखित कोड से भी कर सकते हैं(बस इसमें replaceAll फ़ंग्शन का प्रयोग हुआ है)

$("<div>You Clicked Me!</div>").replaceAll(this);

Empty() तथा Remove()

Empty() फ़ंग्शन आपके चुने हुए एलिमेंट्स के भीतर के सभी नोड्स को खत्म करके आपके एलिमेंट को एक इम्पटी या खाली टैग का रूप दे देता है.

उदाहरण:

हमारे पास एक पैराग्राफ़ है: <p>Welcome to my page</p>

हमने ये लाइने लिखीं: $(“p”).empty();

परिणाम: <p/>

वहीं Remove() फ़ंग्शन आपके चुने हुये एलिमेंट्स को पूरी तरह से खत्म कर देता है. उदाहरण के लिये $(“p”).remove(); पेज में मौजूद सभी पैराग्राफ़ों को खत्म कर देता है.

आइये jQuery सीखें - 3 – Manipulation(2)

पिछली प्रविष्टि में मैंने आपको किसी टैग के भीतर कोई सामग्री या टैग डालना सिखाया था. आज हम jQuery में एलिमेंट्स को बाहर की ओर से जोड़ना सीखेंगे. अबकी बार से मैं पूरे कोड को लिखने की बजाय “शार्ट कट” में लिखूंगा. आपको अगर समझने में दिक्कत जा रही हो तो इस ब्लाग में प्रकाशित jQuery पर पुरानी प्रविष्टियां देखें

after(content), before(content)

इस फ़ंग्शन के द्वारा आप किसी टैग के बाद(after) या पहले(before) कोई सामग्री जोड़ सकते हैं. जैसे अगर निम्न लिखित कोड

<p>Welcome to my home</p>

में पैराग्राफ़ के बाद <strong>Hello</strong> जोड़ना हो तो आपको कुछ इस प्रकार कोड लिखना होगा:

$(‘p’).after(‘<strong>Hello</strong>’);

इससे निम्नलिखित परिणाम मिलेगा:

<p>Welcome to my home</p>

<strong>Hello</strong>

ये परिणाम आप अपने ब्राउजर पर देख सकते हैं पर व्यू सोर्स पर दिखाई नही देगा. इस कोड के बदलाव को देखने के लिये Firebug का प्रयोग करें.

इसी प्रकार अगर इस “हैलो” शब्द को पैराग्राफ़ के ऊपर जोड़ना हो तो after की बजाय before का प्रयोग करेंगे.

insertAfter(selector), insertBefore(selector)

हम इन फ़ंग्शनों को निम्नलिखित उदाहरणो से समझने की कोशिश करेंगे. जैसे आपके पास निम्न लिखित कोड है:

<p> is what I said... </p><div id="foo">FOO!</div>

अब अगर हम चाहते हैं कि <p>…</p> टैग डिव आईडी फ़ू के बाद जुड़े तो हमें कुछ ऐसा कोड लिखना होगा.

$("p").insertAfter("#foo");

इस कोड का अर्थ है <p> टैग को foo आईडी वाले टैग के बाद में जोड़ें.

इसका परिणाम ऐसा आएगा.

<div id="foo">FOO!</div><p> is what I said... </p>

अब जैसा कि नाम से ही स्पष्ट है कि insertBefore() से इसका ठीक उलटा होगा. अत: इसे मैं आपके करने के लिये छोड़ रहा हूं.

wrap(html), wrapAll(html) तथा wrapInner(html)

इन तीनो फ़ंग्शन का एक ही काम है, चुने गये एलिमेंट्स में कुछ टैग्स को अगल बगल लगाना. लेकिन ये तीनों फ़ंग्शन इस रैपिंग के काम को अलग अलग तरीके से अंजाम देते हैं यानि कि इनका प्रभाव अलग अलग आता है. इसे समझने के लिये सबसे पहले एक एचटीएमएल फ़ाइल बनायें और उसमें ये कोड कापी पेस्ट कर दें:

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>

</head>

<body>
<input type="button" id="btn_clickme" value="Click Me" />
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_clickme").click(function(){

आपका कोड यहां लिखा जायेगा.
    });
});
</script>
<p>Mera</p>
<p>Bharat</p>
<p>Mahan</p>
</body>
</html>

उपरोक्त कोड में हमने CSS का प्रयोग किया है ताकि पैराग्राफ़ और डिव टैग अलग अलग दिखाई दें.

उपरोक्त कोड में अगर हम चाहें कि हर पैराग्राफ़ टैग के दोनो ओर डिव टैग लग जाये तो हमें wrap(html) का प्रयोग करना होगा. इसके लिये कोड कुछ ऐसे लिखेंगे:

$(“p”).wrap(“<div></div>”);

पहले

image

बाद में

image

डिव टैग नीली लाइनों में दिखाई दे रहा है. फ़ायर बग में आपको ये कुछ ऐसा दिखेगा:

image

अब अगर हम ये चाहें कि डिव टैग हर पैराग्राफ़ की बजाय केवल पहले और आखिरी पैराग्राफ़ के दोनो ओर लग जाये तो wrapAll(html) फ़ंग्शन का प्रयोग करना पड़ेगा.

$(“p”).wrapAll(“<div></div>”);

पहले

image

बाद में

image

फ़ायर बग में कुछ ऐसा दिखेगा

image

अब ये तो हुई टैगों को बाहर से जोड़ने की बात. अगर हम पैराग्राफ़ के भीतर अक्षरों के दोनो ओर <b></b> टैग लगाना चाहें तो हमें wrapInner(html) फ़ंग्शन का प्रयोग करना पड़ेगा. यानि कि…

$(“p”).wrapInner(“<b></b>”);

पहले

image

बाद में

image

फ़ायरबग में

image

अब एक और बात आप तीनो wrap फ़ंग्शनों में HTML के अलावा एलिमेंट्स को भी गुजार सकते हैं. जैसे कि

$("p").wrapAll(“<div></div>”); को हम ऐसे भी लिख सकते हैं $("p").wrapAll(document.createElement("div"));

Manipulation से संबंधित और बातें अगली प्रविष्टि में

शुक्रवार, 25 सितंबर 2009

आइये jQuery सीखें - 2 – Manipulation(1)

आज हम jQuery के द्वारा पेज के Elements में कुछ डालना और कुछ निकालना सीखेंगे. सबसे पहले अपने पेज में ये कोड कापी पेस्ट कर लें:

<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(){
      //अब यहां पर कोडिंग करेंगे
   });
});
</script>
</body>
</html>

अब अपने पेज में कोई Div टैग बनाते हैं.

<div id=”myname”><span>Welcome to My Page<span></div>

अभी जब आप पेज देखेंगे तो आपको "Welcome To My Page” तथा एक बटन दिखाई देगी.

तो अब शुरू किया जाए:

html() तथा html(val)

Html() से हम किसी भी टैग के भीतर के innerHTML कोड को प्राप्त कर सकते हैं.

अब जो कुछ भी मैं कोड लिख रहा हूं उसे btn_clickme वाले फ़ंग्शन के भीतर लिखियेगा.

alert($(“#myname”).html());

यह कुछ ऐसा दिखेगा

$(document).ready(function(){
   $("#btn_clickme").click(function(){
      alert($(“#myname”).html());
   });
});

अब इस पेज को ब्राउजर में खोलिये और Click Me बटन में क्लिक कीजिये. आपको एक एलर्ट बाक्स दिखेगा जिसमें

<span>Welcome to My Page</span> लिखा होगा.

html(val) से हम किसी भी टैग के भीतर में innerHTML कोड को भर सकते हैं. यहां पर val वह कोड है जिसे हम किसी टैग के भीतर भरना चाहते हैं.

अब पिछले उदाहरण के कोड alert($(“#myname”).html()); को मिटा दीजिये. इसके स्थान पर यह लिखिये:

$(“#myname”).html(“<b>Code Changed</b>”);

यह कुछ ऐसा दिखेगा

$(document).ready(function(){
   $("#btn_clickme").click(function(){
      $(“#myname”).html(“<b>Code Changed</b>”);
   });
});

अब इस पेज को ब्राउजर में देखिये: जैसे ही आप "click me” बटन में क्लिक करते हैं "Welcome To My Page” के स्थान पर मोटे मोटे अक्षरों से "Code Changed” लिखा हुआ आ जाता है.

image

text() तथा text(val)

इन दोनो फ़ंग्शन के बारे में ज्यादा नही लिखूंगा क्योंकि ये html() और html(val) के समान ही कार्य करते हैं पर एक बात का फ़र्क है. अगर आप alert($(“myname”).html()); लिखते हैं तो आपको ऐसा परिणाम मिलता है:<span>Welcome to My Page</span> पर अगर आप alert($(“myname”).text()); लिखते हैं तो आपको ऐसा परिणाम मिलेगा Welcome to My Page यानि कि span टैग गायब हो जायेंगी.जैसा कि नाम से ही स्पष्ट है कि html() फ़ंग्शन HTML Code को भी प्राप्त करता है है जबकि text() फ़ंग्शन अपने नाम के ही अनुरूप केवल TEXT को प्राप्त करता है.

append(content) तथा prepend(content)

एक नया पेज बनाइये और उसमें निम्नलिखित कोड कापी पेस्ट कर दीजिये

<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" />
<div id=”mytitle”>This is Title of Page</div>
<div id=”foo”><b>Hi</b></div>
<script type="text/javascript">
$(document).ready(function(){
   $("#btn_clickme").click(function(){
      //अब यहां पर कोडिंग करेंगे
   });
});
</script>
</body>
</html>
तो अब शुरू करते हैं. btn_clickme के क्लिक हैंडलर के भीतर ये कोड लिख दीजिये:
$("#mytitle").append("- It Worked");
$("#mytitle").prepend("Welcome! ");
और अब पेज ब्राउजर में खोलिये. पहले आपको This is Title of Page लिखा हुआ दिखेगा. पर जैसे ही आप "Click Me” बटन में क्लिक करेंगे तो शुरू में "Welcome! ” तथा आखिरी में "- It Worked” शब्द आ जायेंगे और ये कुछ ऐसा दिखने लगेगा.Welcome! This is Title of Page- It Workedappend से आप किसी टैग के अंदर आखिरी तरफ़ से कोई सामग्री जोड़ सकते हैं. जैसे कि हमनें "It Worked” शब्द को जोड़ा. prepend से आप किसी टैग के अंदर शुरूआती तरफ़ से कोई सामग्री जोड़ सकते हैं. जैसे कि हमनें "Welcome” शब्द को जोड़ा.

appendTo(selector) तथा prependTo(selector)

अपने ऊपर वाले पेज को append/prepend वाली लाइनों को हटाकर फ़िर से पुरानी वाली स्थिति में लाइये.appendTo तथा prependTo किसी एक एलिमेंट के भीतर दूसरे एलिमेंट को डालने का काम करता है. दोनो में फ़र्क केवल इतना है कि एक आखिरी से डालता है तो दूसरा शुरूआत से.उदाहरणों ये और भी स्पष्ट हो जायेगा.

अभी आपके पेज में २ html एलिमेंट हैं:

<div id=”mytitle”>This is Title of Page</div>
<div id=”foo”><b>Hi</b></div>

अब इसे कुछ ऐसा करना चाहते हैं.

<div id=”foo”><b>Hi</b>
<div id=”mytitle”>This is Title of Page</div>
</div>

यानि कि "mytitle” वाले डिव टैग को "foo” वाले डिव टैग के भीतर डालना.जीहां! आपने ठीक अंदाजा लगाया इसके लिये appendTo का प्रयोग करना पड़ेगा.

इसके लिये ऐसा लिखिये

$("#mytitle").appendTo("#foo");

यानि कि "mytitle” आई डी वाले टैग को "foo” आई डी वाले टैग के भीतर आखिरी में रख दिया जाये.
इसी प्रकार अगर हमें ऐसा परिणाम प्राप्त करना हो:

<div id=”foo”>
<div id=”mytitle”>This is Title of Page</div>
<b>Hi</b>
</div>
तो appendTo की जगह prependTo का प्रयोग करेंगे.

आइये jQuery सीखें - 1

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

  1. आप फ़ायरफ़ाक्स ब्राउजर का प्रयोग करें. http://www.mozilla.com/en-US/firefox/personal.html
  2. फ़ायरफ़ाक्स में Firebug एक्सटेंशन इंस्टाल करें https://addons.mozilla.org/en-US/firefox/addon/1843
  3. कोडिंग के लिये 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 की फ़ाइल का पूरा पता भरना होता है.

<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
</head>
<body>

</body>
</html>

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

<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
</head>
<body>
<script type=”text/javascript”>
</script>
</body>
</html>

अब हम 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 का ज्ञान रखते हैं तो इसे आप बड़ी ही आसानी से समझ सकते हैं.

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

<div id=”box1”></div>
<div class=”google”></div>
<span class=”google”></span>

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

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

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

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

Hello Word

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

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

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

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

<input type=”button” id=”btn_clickme” value=”Click Me”/>

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

<script type=”text/javascript”>
$(document).ready(function(){
$(“#btn_clickme”).click(function(){
alert(“Hello World”);
});
});
</script>

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

<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>

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


image


आपको क्लिक मी के नाम का एक बटन दिखाई देगा जिसमें क्लिक करने पर एक बाक्स खुलेगा जिसमें "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=”alert('Hello World');” />

तथा

<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 में और भी बहुत कुछ है जिसकी चर्चा हम आगे करेंगे.

मंगलवार, 22 सितंबर 2009

आइये शुरू करें

इस ब्लाग पर हम यह मानकर चल रहे हैं कि आपको सामान्य HTML,CSS तथा जावास्क्रिप्ट का ज्ञान है. फ़िर भी इन बुनियादी चीजों के बारे में संक्षेप में बताना मैं जरूरी समझता हूं.

Computer Language कई प्रकार की होती हैं जैसे कि Programming Language, Query Language, Markup Language आदि.

  1. इंटरनेट पर जो भी वेब पेज आप देखते हैं वो सभी HTML यानि कि Hypertext Markup Language पर लिखे जाते हैं. HTML एक Markup Language है. यानि कि आप इसमें वैरिएबल जैसा कुछ नही बना सकते हैं.
  2. CSS एक Style Sheet Language है जिसका प्रयोग मार्कअप लैंग्वेज के रूप रंग को निश्चित करना होता है.
  3. Javascript एक Client Side Scripting Language है. जावास्क्रिप्ट वह भाषा है जिसके द्वारा आपका वेब पेज “डायनेमिक” बन जाता है.
  • इस पेज को देखिये: http://script.aculo.us/ खुलते साथ ही यह एनिमेट होता है.
  • आपने इंटरनेट की विभिन्न साइटों में ड्राप डाउन मीनू, सर्च सुझाव आदि तो देखे ही होंगे.
  • आपने देखा होगा कि किस प्रकार किसी फ़ार्म को भरते समय की हुई गलतियों को वेब पेज तुरंत बता देता है.

यह सब जावास्क्रिप्ट से होता है. स्टैटिक या स्थैतिक का अर्थ होता है रुका हुआ और डायनेमिक या गतिज का अर्थ होता है लगातार परिवर्तनशील.

जावास्क्रिप्ट से आप क्लाइंट साइड डायनेमिक पेज बना सकते हैं. लेकिन अब ये क्लाइंट क्या बला है?

इंटरनेट की क्लाइंट-सर्वर पर आधारित संरचना

क्लाइंट सर्वर आधारित संरचना में कम से कम दो मशीनों या यूं कहें दो कम्प्यूटरों का होना आवश्यक है. इनमें से एक क्लाइंट का कार्य करता है और दूसरा सर्वर का. क्लाइंट का कार्य होता है सर्वर को अनुरोध भेजना और सर्वर का कार्य होता है उस अनुरोध के मुताबिक क्लाइंट को जवाब या परिणाम भेजना.

इंटरनेट में जब आप किसी साइट को खोलते हैं मसलन http://www.google.com/ तब आप अपने ब्राउजर (जैसे फ़ायर फ़ाक्स, ओपेरा, इंटरनेट एक्सप्लोरर आदि) से गूगल के सर्वर को पेज खोलने के लिये अनुरोध भेजते हैं. यहां पर आपका कम्प्यूटर क्लाइंट का कार्य करता है. आपके अनुरोध के जवाब में गूगल का सर्वर आपको HTML,CSS,Javascript में बना हुआ कोड भेजता है जिसे आपका ब्राउजर पढ़ सकता है. और इस प्रकार आपको गूगल का पेज दिखाई दे जाता है.

blog diagrams

जावास्क्रिप्ट क्लाइंट पर चलने वाली लैंग्वेज है यानि कि ब्राउजर में. यह आपके html,css में बदलाव लाने में सक्षम है पर यह बदलाव आपके ब्राउजर में होता है. अब आगे बात करते हैं सर्वर साइड लैंग्वेज की.

Server Side Languages

जैसे कि मैंने बताया कि जावास्क्रिप्ट पेज में जो भी बदलाव करती है वह क्लाइंट पर होता है. जबकि सर्वर साइड लैंग्वेज जैसे कि php,asp,asp.net,jsp,cold fusion आदि जो भी पेज में बदलाव करती हैं वो सर्वर में ही हो जाता है. सर्वर साइड लैंग्वेजों को रन होने के लिये सर्वर साफ़्टवेयर की आवश्यकता होती है वहीं क्लाइंट साइड स्क्रिप्टों को रन होने के लिये केवल एक ब्राउजर चाहिये होता है.

यानि कि सर्वर साइड लैंग्वेजेज़ से ब्राउजर को जो भी HTML के रूप में कोड प्राप्त होता है वह सर्वर से ही हर बार बदला जा सकता है.

सर्वर साइड लैंग्वेजों के अपने फ़ायदे हैं जैसे कि…

  • आपका लिखा प्रोग्राम कोई देख नही सकता है. जो कुछ दिखेगा वह केवल html,css,js का मिश्रण होगा.
  • आप अपने पेज की सामग्री को डाटाबेस में रख सकते हैं फ़िर सर्वर साइड प्रोग्रामिंग के जरिये उसे प्राप्त करके पेज में दिखा सकते हैं. (यह करीब करीब कर वेब एप्लिकेशन में होता है)

ये दोनो काम जावास्क्रिप्ट नही कर सकती है. पर जावास्क्रिप्ट जो कर सकती है वो सर्वर साइड लैंग्वेज नही कर सकती हैं. जैसे कि…

  • ब्राउजर में हल्के फ़ुल्के एनिमेशन बना देना
  • फ़ार्म वैलिडेशन (वैसे यह काम सर्वर साइड लैंग्वेज के द्वारा भी किया जा सकता है. पर जावास्क्रिप्ट से करना बेहतर रहेगा)
  • स्लाइडिंग मीनू, एजेक्स आदि के कार्य (एजेक्स में क्लाइंट साइड तथा सर्वर साइड दोनो ही तकनीकों की जरूरत पड़ती है.

ध्यान रहे: सर्वर साफ़्टवेयर जैसे IIS, Apache आदि Javascript को  पढ़/रन नही कर सकते हैं वहीं आपका ब्राउजर php,asp,asp.net,jsp आदि को पढ़/रन नही कर सकता है.

प्रमुख सर्वर साइड भाषायें हैं:

  • PHP (Hypertext Preprocessor)
  • ASP (Active Server Pages)
  • ASP.net (Active Server Pages Dot Net)
  • JSP (Java Server Pages)
  • Cold Fusion
  • Perl
  • Python

इनमें से सबसे अधिक PHP को प्रयोग में लाया जाता है. PHP सीखना आसान है, यह मुफ़्त है और यह मुक्त है.

हो सकता है कि आपको ऊपर की कुछ चीजें समझ में ना आईं हो.  पर चिंता मत कीजिये धीरे धीरे सब समझ आ जायेगा. मुझे “सर्वर क्या होता है” समझने में छ: माह लगे थे.

इस ब्लाग में प्रकाशित सामग्री कापीराईट द्वारा सुरक्षित है. बिना अनुमति इसका किसी भी प्रकार से अन्यत्र प्रयोग/प्रकाशन मूल रूप में/बदल कर उपयोग नही किया जा सकता है.

हिंदी में तकनीकी लेखन को प्रोत्साहित करें

please donate अभी तक वेब डेवलपमेंट अथवा प्रोग्रामिंग आदि से संबंधित जानकारी पर अंग्रेजी का एकाधिकार रहा है. भारत में इतने आई टी गुरू होने के बावजूद भारतीय भाषाओं में इस विषय पर लेखन नगण्य है. इस ब्लाग के माध्यम से मैं हिन्दी भाषिओं तक वेब डेवलपमेंट का ज्ञान पहुंचाने की कोशिश कर रहा हूं. अत: आप सभी से अनुरोध है कि हिंदी में तकनीकी लेखन के लिये सहयोग करें
मैं वेबसाइटें भी बनाता हूं. यदि आपको बनवानी हो तो बताएं.

इस ब्लॉग में खोजें

फ़ॉलोअर