Web Design - jQuery

 

jQuery

জেকোয়েরি দিয়ে যেসব করা হয়:

1. বিভিন্ন সাইটে ড্রপডাউন মেনু দেখেছেন তো?এসব সাধারনত জেকোয়েরি দিয়ে করা।
2. ইমেজ স্লাইডশো
3. ট্যাব সিস্টেম

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

jQuery

$(document).ready(function(){

$(".myheader").hide();

$(".mypara").click(function(){

$(".myheader").show();

});

});

</script>

যেহেতু  এইচটিএমএল এর এলিমেন্ট নিয়েই জেকোয়েরির কাজ তাই এইচটিএমএল আগে লোড করে তারপর জেকোয়েরিকে এক্সিকিউট করানো উচিৎ।এখানে প্রথম লাইন দ্বারা এই কাজটিই হচ্ছে অর্থ্যাৎ  $(document).ready(); দ্বারা বলা হচ্ছে যে আগে পুরো এইচটিএমএল ডকুমেন্ট টুকু লোড হবে তারপর জেকোয়েরির ফাংশনগুলি কাজ শুরু করবে।(তাই দেখুন ready ফাংশনের প্রথম বন্ধনীর মধ্যে বাকি সবগুলি কোড বা ফাংশনগুলি রাখা হয়েছে)

jQuery Element Selection

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

<script src="/jquery_latest.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$('p').click(function(){

alert('You clicked on a paragraph');

});

});

</script>

<h1 id="tutorial">JQuery Tutorials</h1>

<p id="first_para">Bangladesh is a country of natural beauty</p>

<p class=“satech"> DOT com is the largest bengali</p>

<p class="satech">There are 30 tutorial on JQuery in</p>

jQuery Event

ওয়েব পেজে ইউজার কখনও মাউস ক্লিক করে(কোন একটা লিংক বা যেকোন কিছুর উপর), কিবোর্ড দিয়ে টাইপ করে (ফর্ম থাকলে), কখনও কোন একটা এলিমেন্টের উপর মাউস নিয়ে যেতে (মাউস হোভার) পারে এটা কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা যেকোন কিছুর উপরে হতে পারে। এগুলি হচ্ছে এক একটা ইভেন্ট। যেমন কোন একটা প্যারাগ্রাফ বা বাটনের উপর ক্লিক করলেন, তাহলে এটা একটা ইভেন্ট (ক্লিক ইভেন্ট)। কোন একটা এলিমেন্টের উপর মাউস নিয়ে গেলেন এটা একটা ইভেন্ট (মাউস হোভার ইভেন্ট)। এরুপ আরো ইভেন্ট আছে যেমন scroll ইভেন্ট, load ইভেন্ট, focus ইভেন্ট ইত্যাদি।

jQuery Event Handler

ওয়েব পেজে এমন অনেক ইভেন্ট ঘটে, এই ইভেন্টগুলি ধরে আমরা ইচ্ছে করলে কোন কাজ করতে পারি, কোন জেকোয়েরির কোড এক্সিকিউট করাতে পারি। জেকোয়েরিতে অনেক ফাংশন আছে যেগুলি শুধু এসব কোন ইভেন্ট ঘটলে এক্সিকিউট হবে এই ফাংশনগুলিকে বলে ইভেন্ট হ্যান্ডলার। ready(), click(), hover() এরুপ আরো অনেক ইভেন্ট হ্যান্ডলার আছে। যখনি একটা ইভেন্ট ঘটল, এটাকে টেকনিকাল ভাষায় বলে অমুক ইভেন্ট fire হল। একটা ইভেন্ট fire হওয়ার সাথে সাথে ঐ ইভেন্ট সংশ্লিষ্ট হ্যান্ডলার এর ভিতর কোড এক্সিকিউট হয়।

কোন একটা এলিমেন্ট সিলেক্ট করে এরপর যদি ready() ইভেন্ট হ্যান্ডলার ব্যবহার করেন তাহলে ঐ এলিমেন্টটি পেজে সম্পূর্ন লোড হওয়ার পর ready() এর ভিতর কোডগুলি কাজ করা শুরু করবে। যদি এলিমেন্ট লোড হওয়া পূর্ন না হয় তাহলে এর ভিতরের কোড কাজ করবেনা বরং অপেক্ষা করবে। সাধারনত জেকোয়েরির কোডের শুরুতেই এই হ্যান্ডলার ব্যবহার করে অর্থ্যাৎ পুরো পেজ সম্পূর্ন লোড হবে এরপর জেকোয়েরির অন্যসব কোডগুলি কাজ করা শুরু করবে।

অনুরুপ অন্যান্য ইভেন্ট হ্যান্ডলার এর ক্ষেত্রেও প্রযোজ্য যেমন $('#test').click() এভাবে থাকলে এর অর্থ হচ্ছে test আইডি সম্বলিত এলিমেন্টটি তে ক্লিক করার পর click() ইভেন্ট হ্যান্ডলার এর ভিতরের কোড এক্সিকিউট হবে।

jQuery conflict removal

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

jQuery conflict removal

var abc = jQuery.noConflict();

abc(document).ready(function(){

abc('table tr').each(function(i){

if(i < 5){

if(i % 2 == 0){

abc(this).addClass('even');

}else{

abc(this).addClass('odd');

}

}

});

});

jQuery conflict removal

•       abc ভেরিয়েবলের নাম ইচ্ছেমত দিতে পারেন।পরবর্তীতে জেকোয়েরির সব কোডে যেখানে যেখানে $ চিহ্ন আছে তা এই নাম দিয়ে প্রতিস্থাপন করতে হবে।

•       জাভাস্ক্রিপ্টের অনেক লাইব্রেরী $ এই চিহ্ন তাদের ভেরিয়েবল বা ফাংশন নামের জন্য ব্যবহার করে তাই একসাথে একাধিক ফ্রেমওয়ার্ক ব্যবহার করলে এই ধরনের সমস্যা হতে পারে।

•       j ছোটহাতের এরপর Q বড়হাতের,এভাবেই লিখতে হবে নাহলে কাজ হবেনা।

•       ব্যাখ্যা:এখানে এইজটিএমএল এবং সিএসএস দিয়ে অনেক গুরত্বপূর্ন কাজ হয়ে গেছে তবে যেহেতু এগুলি শিখে এসেছেন তাই শুধু এখানে জেকোয়েরির কোডে যেসব নতুন মেথড ব্যবহার করেছি সেগুলির ব্যাখ্যা দিচ্ছি।

•       ১ নম্বর লাইনে ডকুমেন্ট রেডি হয়েছে এরপর ২ নম্বর লাইনে #menu আইডি সম্বলিত যে ul আছে তার অধীনস্থ li সিলেক্ট করেছি।যখন এই li এর উপর মাউস হোভার হবে তখন শুধুমাত্র এই li এর অধীনে যদি কোন ul (অর্থ্যাৎ সাবমেনু) থাকে তাহলে সেটি find() মেথড দিয়ে খুজে বের করেছি এবং এরপর slideDown() মেথড ব্যবহার করে সেই ul দৃশ্যমান করা হয়েছে।এই মেথডটির ভিতর যে নাম্বার দেখছেন এটা হচ্ছে গতি।যত কম নম্বর দিবেন গতি তত বেশি হবে।

•       **এখানে দেখুন ডট (.) দিয়ে একটা একটা করে মেথড সিলেক্টেড এলিমেন্টের উপর চালানো হয়েছে এটা হচ্ছে মেথড চেইনিং।এভাবে ডট দিয়ে দিয়ে যতগুলি প্রয়োজন ততগুলি মেথড চালাতে পারেন একটা সিলেক্টেড এলিমেন্টর উপর।

•       **প্রথম এবং দ্বিতীয় বন্ধনীর ব্যাপারটি জেকোয়েরিতে সবচেয়ে গুরত্বপূর্ন এবং বিরক্তিকর (প্রথম প্রথম)।কয়েক ডজন কোড লেখার পর অবশ্য আর না বুঝতে অসুবিধা হবে আর না লিখতে।

•       এখন মাউস সরিয়ে নিলে কি হবে এটা লেখা হয়েছে ৪ নম্বর লাইনে কমার (,) পর।এই ফাংশনটি ঐ ul টিই খুজে বের করে slideUp() মেথড দিয়ে উপরে উঠিয়ে নেবে।

•       ৭ নম্বর লাইন থেকে যে কোডগুলি লিখেছি এগুলি অতিরিক্ত কিছু স্টাইলিং এর জন্য।এখানে children() দিয়ে li এর উপর হোভার করার সময় চেক করে দেখা হচ্ছে যে এই li এর অধীনে কোন সাবমেনু আছে কিনা।যদি থাকে তাহলে সেই li তে rem_radius নামে একটি ক্লাস যোগ করা হয়েছে এবং সেই ক্লাস সম্বলিত li এর a ট্যাগের বর্ডার রেডিয়াস মুছে দেয়া হয়েছে (শুধু নিচের দিকে ডানে এবং বামে)।

jQuery form validation

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

jQuery form validation

আমি যে ফর্ম তৈরী করেছি সেটার আইডি reg_form.৪ নম্বর লাইনে এই ফর্ম সাবমিট হচ্ছে কিনা তা submit মেথড দিয়ে চেক করা হচ্ছে।যখনি সাবমিট বাটনে ক্লিক করবে সাথে সাথে কয়েকটি ফাংশন এক্সিকিউট হবে।যদি সবগুলিই ফাংশন true রিটার্ন করে তাহলে ফর্ম সাবমিট হবে তানাহলে এই if স্টেটমেন্ট false রিটার্ন করবে এবং ফর্ম সাবমিট না হয়ে কি করতে হবে তা দেখাবে।

এখানে ৩টি ফাংশন লিখেছি।

 

প্রথম ফাংশন: এই ফাংশনটির প্যারামিটার fieldName এবং Id (১৩-৩৯ লাইন)

১৫-১৭ নম্বর লাইনের অর্থ হচ্ছে যে টেক্সট ফিল্ডটির নাম (name এট্রিবিউটের মান) আর্গুমেন্ট হিসেবে পাঠাবে সেই টেক্সট ফিল্ডটি সিলেক্ট করে এর মান val() মেথড দিয়ে বের করে এনে length প্রোপার্টি দিয়ে চেক করে দেখবে যে ১ এর চেয়ে ছোট কিনা (অর্থ্যাৎ ১ এর চেয়ে ছোট হলে ০,তার মানে কিছুই টাইপ করেনি),যদি হয় তাহলে text() মেথড ব্যবহার করে ঐ টেক্সট ফিল্ডের নিচে যে span ট্যাগ আছে সেখানে "Please enter any text" এই লেখাটি দৃশ্যমান করবে (ফাংশন কল করার সময় যে span এর আইডি দিবেন সেই span এ লেখাটি আসবে)।এবং সবশেষে error নামে একটা ক্লাস যোগ করে false রিটার্ন করে ফর্ম সাবমিট হতে দিবেনা।

আর যদি কিছু টাইপ করে তাহলে উপরোক্ত লেখাটি error ক্লাস সহ (যদি থাকে) উঠে গিয়ে true রিটার্ন করবে এবং ফর্ম সাবমিট হবে।

দ্বিতীয় ফাংশন: ইমেইল ভেলিডেশন এর জন্য (৪২-৬৪ লাইন)

একই ব্যাখ্যা,এখানে শুধু test মেথড দিয়ে চেক করা হয়েছে যে ইনপুটকৃত মান বৈধ ইমেইল কিনা।filter এখানে রেগুলার এক্সপ্রেশন,যেকোন বৈধ ইমেইল এই ফিল্টারে আটকে যাবেনা।

 

তৃতীয় ফাংশন: নম্বর ভেলিডেশন (৬৭-৯৪ লাইন)

আগের দুটোর মতই,এখানে একটা নতুন মেথড আছে তাহল isNaN().এই মেথড দিয়ে ইনপুটকৃত মান নাম্বার কিনা দেখা হচ্ছে।যদি নাম্বার হয় তাহলে false রিটার্ন করে।

এখানে মাত্র কয়েকটি ফিল্ড তাই এভাবে ফাংশন না লিখে সরাসরি কোড লেখাই ভাল ছিল।তবে যদি অনেক বড় ফর্ম হয় তাহলে প্রতিটি ফিল্ডের জন্য আলাদা আলাদা কোড না লিখে এভাবে একই ফাংশন শুধু প্যারামিটার পরিবর্তন করে কাজ করা যায় এবং এটাই উত্তম।