জেকুয়েরি টিউটোরিয়াল - Jquery Tutorial
জেকুয়েরি (Jquery) হচ্ছে জাভাস্ক্রিপ্টের একটি লাইব্রেরী। এটা জাভাস্ক্রিপ্ট প্রোগ্রামিংকে অনেক সহজ করে তুলেছে।
জেকুয়েরি শেখাও অনেক সহজ। আমাদের এই জেকুয়েরি টিউটোরিয়ালটির মাধ্যমে আমরা খুব সহজভাবে জেকুয়েরি লাইব্রেরীকে উপস্থাপন করার চেষ্টা করেছি যেন আপনারও বুঝতে সুবিধা হয়।
আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>এটি একটি হেডিং।</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>ক্লিক করুন</button>
</body>
</html>
ফলাফল
জেকুয়েরি উদাহরণ
উদাহরণের মাধ্যমে জেকুয়েরি শিখুন! কেননা একটি উদাহরণ এক হাজার শব্দের চেয়েও উত্তম। আমাদের জেকুয়েরি টিউটোরিয়ালে অসংখ্য উদাহরণ দেখতে পাবেন, যেগুলোর মাধ্যমে আপনি খুব সহজেই জেকুয়েরি শিখতে পারবেন।
জেকুয়েরির মূল উদ্দেশ্য হলো কোনো ওয়েবসাইটে জাভাস্ক্রিপ্টকে সহজভাবে ব্যবহার করা।
জেকুয়েরি টিউটোরিয়ালটি আরম্ভ করার পূর্বে আপনাকে কি কি জানতে হবে?
এটা শেখা আরম্ভ করার পূর্বে আপনাকে নিম্নোক্ত বিষয়গুলো জানতে হবে?
- এইচটিএমএল: ওয়েব পেজের কন্টেন্ট সরবরাহ করে।
- সিএসএস: ওয়েব পেজের নকশা তৈরি করে।
- জাভাস্ক্রিপ্ট: ওয়েব পেজের কাজের ধারা বা আচরণ নির্ধারণ করে।
স্ব-স্ব লিংক ভিজিট করে আপনি উপরের বিষয়গুলো শিখতে পারেন।
জেকুয়েরি কি?(What is jQuery?)
জেকুয়েরি "খুবই সহজ এবং কথা কম কাজ বেশি" টাইপের একটি জাভাস্ক্রিপ্ট লাইব্রেরী। এটার মূল উদ্দেশ্যই হচ্ছে আপনার ওয়েবসাইটে জাভাস্ক্রিপ্টের ব্যবহার সহজ করা।
জাভাস্ক্রিপ্টের একাধিক লাইনের কোড লিখে যে কাজ সম্পন্ন করা হয় তা জেকুয়েরির শুধুমাত্র এক লাইনের কোড লিখেই করা সম্ভব।
কেননা আমরা ইতিপূর্বেই জেনে এসেছি যে, জেকুয়েরি হচ্ছে জাভাস্ক্রিপ্টের একটি লাইব্রেরী। বিভিন্ন কার্য সম্পাদনের জন্য জেকুয়েরি নামক এই লাইব্রেরীর মধ্যে সংশ্লিষ্ট কোড গুলো বিভিন্ন মেথডের মাধ্যমে লিপিবদ্ধ করা আছে।
আপনার প্রয়োজন অনুযায়ী ঐ মেথডগুলো রেফারেন্স হিসাবে ব্যবহার করে সংশ্লিষ্ট কাজ গুলো আপনি খুব সহজেই সমাধান করতে পারবেন।
এছাড়া জাভাস্ক্রিপ্টের Ajax এবং DOM এর মত কঠিন বিষয়গুলোকেও জেকুয়েরি খুবই সহজ করে তুলেছে।
জেকুয়েরি লাইব্রেরীর মধ্যে নিম্নোক্ত বৈশিষ্ট্যগুলো বিদ্যমানঃ
- ডোম(DOM) মেথড
- সিএসএস মেথড
- এইচটিএমএল ইভেন্ট মেথড
- এনিমেশন মেথড
- এজাক্স মেথড
- ইউটিলিটি মেথড
কেন জেকুয়েরি ব্যবহার করবেন?
জাভাস্ক্রিপ্টের অসংখ্য লাইব্রেরী/ফ্রেমওয়ার্ক রয়েছে। কিন্তু জেকুয়েরি অনেক জনপ্রিয়। কারণ এটি জাভাস্ক্রিপ্টের একটি সিদ্ধ লাইব্রেরী।
অনেক বড় বড় কোম্পানিও জেকুয়েরি ব্যবহার করে। যেমনঃ
- গুগল
- মাইক্রোসফট
- আইবিএম
- নেটফ্লিক্স
জেকুয়েরির ব্রাউজার সাপোর্টঃ
জেকুয়েরি ডেভেলপার টিম ক্রস ব্রাউজার ইস্যুগুলো খুব ভাল ভাবেই জানেন এবং সেই জ্ঞানকেই তারা জেকুয়েরি লাইব্রেরীতে প্রয়োগ করেছে। এজন্য IE ভার্সন-৬ সহ সকল ব্রাউজারেই জেকুয়েরি খুব ভাল ভাবেই সাপোর্ট করে।
ওয়েব পেজে জেকুয়েরি যুক্ত করা
আপনি দুইটি উপায়ে জেকুয়েরি লাইব্রেরীকে একটি ওয়েব পেজে যুক্ত করতে পারেন। উপায় সমূহ নিম্নে দেওয়া হলোঃ
jQuery.comথেকে জেকুয়েরি লাইব্রেরী ডাউনলোড করে<script>ট্যাগের মাধ্যমে যুক্ত করা।- <script> ট্যাগের মাধ্যমে কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) এর সাথে সংযোগ দিয়ে।
জেকুয়েরি ডাউনলোড
জেকুয়েরির দুইটি ভার্সন রয়েছে। ইচ্ছা করলে আপনি দুইটি ভার্সনই ডাউনলোড করতে পারেনঃ
- প্রোডাকশন ভার্সন - সাধারণত লাইভ ওয়েবসাইটের জন্য ব্যবহার করা হয় কারন এটি মিনিফাইড(Minified) এবং কমপ্রেসড(Compressed) ফাইল।
- ডেভেলপমেন্ট ভার্সন - সাধারণত কোনো ওয়েবসাইট ডেভেলপমেন্ট এবং টেস্টের জন্য ব্যবহার করা হয়। কারন এই ফাইলটি খুব সহজেই পড়া এবং এডিট করা যায়।
আপনি উপরের দুটি ভার্সনই jQuery.com থেকে ডাউনলোড করতে পারবেন।
যেহেতু জেকুয়েরি লাইব্রেরী একটি একক জাভাস্ক্রিপ্ট ফাইল। সুতরাং এইচটিএমএল ডকুমেন্টের সাথে জেকুয়েরি লাইব্রেরীকে সংযোগ করতে <head> সেকশনের মধ্যে <script> এলিমেন্টের scr এট্রিবিউটের মাধ্যমে যুক্ত করতে পারবেন।
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>
আপনি কি বিস্মিত হলেন! <script> এলিমেন্টের মধ্যে কেন type="text/javascript" ব্যবহার করিনি?
এটা এইচটিএমএল(৫)-এ ব্যবহার করা বাধ্যতামূলক না। কারন এইচটিএমএল(৫) এবং অধিকাংশ ব্রাউজারে ডিফল্টভাবে জাভাস্ক্রিপ্ট থাকে।
জেকুয়েরি সিডিএন (CDN)
আপনি যদি জেকুয়েরি ডাউলোড এবং হোস্ট করতে না চান সেক্ষেত্রে কন্টেন্ট ডেলিভারি নেটওয়ার্কের (CDN) মাধ্যমে জেকুয়েরি লাইব্রেরীকে আপনার ওয়েবসাইটের সাথে সংযোগ দিতে পারেন। এক্ষেত্রেও লাইব্রেরীটি এমনভাবে কাজ করবে যেন আপনার সাইটেরই কোনো ডিরেক্টরিতে এটি সংরক্ষিত আছে বলে মনে হবে।
গুগল এবং মাইক্রোসফট উভয়ই জেকুয়েরি হোস্ট করে। এদের থেকে জেকুয়েরি হোস্টিং নিতে চাইলে নিচের যেকোনো একটি নিয়ম অনুসরন করুনঃ
গুগল সিডিএন (CDN):
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>এটি একটি হেডিং।</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>ক্লিক করুন</button>
</body>
</html>
ফলাফল
মাইক্রোসফট সিডিএন (CDN):
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>এটি একটি হেডিং।</h2>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>ক্লিক করুন</button>
</body>
</html>
ফলাফল
জেকুয়েরি রেফারেন্স
আমাদের জেকুয়েরি টিউটোরিয়ালে অবজেক্ট এবং মেথডের সম্পূর্ণ রেফারেন্স রয়েছে।
রেফারেন্স পেতে ভিজিট করুন জেকুয়েরি রেফারেন্স