আশাকরি সকলে ভালো আছেন। আমি আলহামদুলিল্লাহ ভালো আছি। তো আগেই ক্ষমা চেয়ে নিচ্ছি গত দিন টিউন করতে না পারার জন্য। আজ আমরা জানব jQuery এর মেথড লিখার পদ্ধতি ও ব্যবহার। তো চলুন কথা না বাড়িয়ে আমরা আমাদের লক্ষ্যের দিকে আগাই।

jQuery লিখব

আমরা ইতি মধ্যেই জেনেছি jQuery সিন্টেক্স কিভাবে লিখতে হয়। আমরা আমাদের jQuery কোড গুলো লিখব আলাদা আরেকটি ফাইলে এবং তা প্রোজেক্টের মেইন ফাইলে jQuery.js ফাইলের পরে যুক্ত করে দিব। ধরুন আমরা script.js নামে আরেকটি ফাইল করে তা jQuery ফাইলের নিচে যুক্ত করে নিলাম। তো এখন আমরা এই ফাইলে jQuery লিখব। তার আগে আমাদের আরেকটি বিষয় খেয়াল রাখতে হবে আমাদের লিখা jQuery কোড তখনই কাজ করবে যখন আমাদের প্রোজেক্টের ওয়েব পেজ সম্পূর্ণ লোড হয়ে যাবে ব্রাউজারে। তার জন্য আমাদের নিচের কোডের ভেতর jQuery  কোড লিখতে হবে।

$(document).ready(function(){

jQuery codes goes here.

});

এখন চলুন আমরা জেনে নেই এই কোডটুকু কি বলছে। এখানে বলা হয়েছে যখন ডকুমেন্ট পেজটা সম্পূর্ণ রেডি হবে তখন ফাংশান কাজ করবে এবং কি ফাংশান, যেগুলো আমরা jQuery দিয়ে তৈরি করবো। যেহেতু আমরা ওয়েব ডিজাইনিং টা শিখিছি কোন না কোন ভাবে ব্যবহার করার জন্য। মানে ধরুন আপনি কোন আইটি ফার্ম এ কাজ করবে অথবা ধরেই নিলাম ফ্রিল্যান্সিং করবেন। বর্তমানে WordPress খুবই জনপ্রিয় সিএমএস এবং এটা jQuery এর সর্টফর্ম ($) সাইন সাপোর্ট করে না। তো আমরা এই সিজিরটা এখন ভাবেই শুরু করবো যাতে শুধু এই সিএমএস না যেকোন সিএমএস এ আমাদের লিখা jQuery  কোড কাজ করে। তো তার জন্য আমাদের ডকুমেন্ট রেডি করা এবং jQuery কোড গুলো নিচের ফাংশানটিতে লিখব।

(function($){

$(document).ready(function(){

jQuery codes goes here.

});

}).(jQuery);

তো এখানে বলা হয়েছে ফাংশান এর পরে যে $ সাইনটা রয়েছে তা শেষে যে jQuery টা রয়েছে তা দিয়ে পরিবর্তিত করে দিবে। আর এর ফলে যা ঘটবে তাহল এই ফাংশানের ভেতর যতগুলো $ সাইন থাকবে তার সবগুলোই jQuery তে পরিনত হবে। যার ফলে আমাদের jQuery কোড গুলো সকল ক্ষেত্রেই কাজ করবে। তো চলুন আমরা আমাদের jQuery এর মেথড সম্পর্কে জানি ও তার ব্যবহার দেখি।

:: মেথডস ::

নিচের কোড গুলো আমরা আমাদের HTML ফাইলে যুক্ত করে ফাইলটি ব্রাউজারে খুলব।

<button id="hide">Hide</button>

<button id="show">Show</button>

<button id="Toggle">Toggle</button>

<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

তো চলুন আমরা আমাদের jQuery এর হাইড মেথড এর জন্য কোন কোডটি ব্যবহার হয় তা জেনে নেই।

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

$(".text").hide();

});

তো আমরা দেখলাম হাইড মেথড লিখার পদ্ধতি। এখানে বলা হয়েছে #hide নামে যে বাটনটি রয়েছে তাতে ক্লিক ইভেন্ট সংঘটিত হলে.text এই class টা যে এলিমেন্টে রয়েছে সেগুলো হাইড হয়ে যাবে। আপনারা যদি কোড গুলো বুঝে থাকেন এবং লিখে থাকেন তা ব্রাউজারে ট্রাই করে দেখুন। তো এখন খেয়াল করুন hide এর পরে দুটো ব্রেকেট রয়েছে। তাতে আপনি এক্সট্রা কিছু জিনিস দিতে পারবেন। যেমনঃ আপনি এতে স্পিড দিয়ে দিতে পারে মানে বাটনে ক্লিক করলে কত সময়ের ভেতর আপনার কাজটি সম্পন্ন হবে। আর এর পর দিতে পারে কল ব্যাক ফাংশন, যাতে বলে দিতে পারবেন এই ফাংশানটি সম্পন্ন হওয়ার পর আর কোন কিছু ঘটবে কিনা। এখানে সময় হিসেবে আপনি তিনটি জিনিস দিতে পারেন যথাঃ "slow", "fast", এবং নাম্বার।

"slow" & "fast" এর জন্য আপনাকে কোটেশন মার্ক ব্যবহার করতে হবে। আর নাম্বারের জন্য কোট ব্যবহার করতে হবে না। এখানে নাম্বার বলতে সময় সীমা বুঝানো হয়েছে আর jQuery এর ক্ষেত্রে সময় মিলি সেকেন্ড এ ব্যবহার হয়। আপনি যদি লিখেন ১০০০ তার মানে হলো ১ সেকেন্ড, আর যদি লিখেন ২০০ তার মানে ১ সেকেন্ডের ১০০ ভাগের ২০ ভাগ। এভাবে করে আমাদের হিসেব করে করে সংখ্যা বসিয়ে কাজ করতে হবে, মানে আমাদের যতটুকু দরকার আমরা ততটুকু ব্যবহার করবো। আশা করি বুঝতে পেরেছেন। তো চলুন সো মেথডটি কিভাবে লিখতে হয় দেখি।

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

$(".text").show();

});

তো আমরা যেভাবে hide বাটনে ক্লিক করে কিছু জিনিস হাইড করেছি ঠিক তেমনি ভাবে show বাটনে ক্লিক করে হাইড করা জিনিস পুনরায় ফিরিয়ে আনতে পারি। তো আমরা দেখলাম কিভাবে hide এবং show বাটনে ক্লিক করে কোন কিছু হাইড এবং সো করতে পারি। এখন একটি মজার জিনিস দেখব আর তা হল এই হাইড এবং সো এর কাজ আমরা দুটো বাটনে নয় একটি বাটনে দেখব। তো চলুন দেখি কিভাবে করা যায়ঃ

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

$(".text").toggle();

});

তো আপনারা এবার এই কোডটুকু আমাদের তৈরি js ফাইলে লিখে ব্রাউজারে ট্রাই করে দেখুন। এখানে বলা হয়েছে টুগোল বাটনে ক্লিক করলে টেক্সট এলিমেন্টটি দেখা গেলে হাইড হবে আবার যদি দেখা না যায় তাহলে সো হবে। আশা করি বিষয়টা বুঝতে পেরেছেন। তো আপনারা অবশ্যই অবশ্যই ভালো করে বার বার প্রেক্টিস করবেন। আজ এই পর্যন্ত, ভালো থাকুন এবং সুস্থ থাকুন, আগামী টিউনে আপনাদের সাথে আবার দেখা হচ্ছে নতুন কিছু।

বিঃদ্রঃ- লিখায় যদি বানান ভুল থাকে তাহলে ক্ষমার দৃষ্টিতে দেখবেন আশা করি। কারণ, বাংলা লেখি না গত ২-৩ বছর। আর কোন ধরনের মন্তব্য থাকলে টিউমেন্ট এ জানাবেন।