প্রথম জেকোয়েরি এপ্লিকেশন (jQuery first application : Basic)
প্রথমে
যেকোন নামে একটি ফোল্ডার তৈরী করে ডাউনলোডকৃত জেকোয়েরি ফ্রেমওয়ার্কটি
(jquery_latest.js) এই ফোল্ডারে রাখুন।এই ফোল্ডারে আরও দুটি ফাইল বানান ১.
index.html এবং ২. style.css
এবার index.html ফাইলে নিচের কোড লিখুন
আউটপুট
নিচে "Webcoachbd is nice tutorial site" এই লাইনে ক্লিক করুন
script ট্যাগের src এট্রিবিউটে ফাইলটির ঠিকানা দিতে হয়।এরপর আবার <script> </script> ট্যাগের ভিতর জেকোয়েরির কোড লিখেছি,
যেহেতু
এইচটিএমএল এর এলিমেন্ট নিয়েই জেকোয়েরির কাজ তাই এইচটিএমএল আগে লোড করে
তারপর জেকোয়েরিকে এক্সিকিউট করানো উচিৎ।এখানে প্রথম লাইন দ্বারা এই কাজটিই
হচ্ছে অর্থ্যাৎ $(document).ready(); দ্বারা বলা হচ্ছে যে আগে পুরো
এইচটিএমএল ডকুমেন্ট টুকু লোড হবে তারপর জেকোয়েরির ফাংশনগুলি কাজ শুরু
করবে।(তাই দেখুন ready ফাংশনের প্রথম বন্ধনীর মধ্যে বাকি সবগুলি কোড বা
ফাংশনগুলি রাখা হয়েছে)
** $(document).ready(); এই লাইনকে সংক্ষিপ্ত করে নিচের মত করে লেখা যায়
এরপর
আসল জেকোয়েরির কোড শুরু হয়েছে।$(".myheader").hide(); এই লাইনে myheader
নামে যে ক্লাসটি এইচটিএমএল কোডে আছে সেটি প্রথমে সিলেক্ট করা হয়েছে।
উল্লেখ্য যে, জেকোয়েরি কোড লেখার নিয়মই এটা যে সব আগে ডলার সাইন ($) বা jQuery
এই শব্দটি লিখে এরপর প্রথম বন্ধনীতে সিঙ্গেল বা ডাবল কোটেশন এর ভিতর সিএসএস সিলেক্টর টি লিখতে হয় (যে এইচটিএমএল এলিমেন্টটি তে কাজ করবেন তার আইডি, ক্লাস অর্থ্যাৎ তার সিলেক্টর)।সবশেষে ডট (.) চিহ্ন দিয়ে জেকোয়েরির মেথডটি দিতে হয়।যেমন আমি দিয়েছি hide() মেথড।এই মেথড সিলেক্টেড এলিমেন্টকে লুকিয়ে রাখে।এরুপ আরও অনেক ফাংশন তাদের সাইটে গিয়ে দেখতে পারেন,সেখানে বিস্তারিত বিবরন আছে।এই ফাংশনগুলিই ভালভাবে জানতে হবে এবং প্রয়োগ শিখতে হবে।
এরপরের লাইনে mypara ক্লাস সম্বলিত যে প্যারাগ্রাফটি আছে সেটি সিলেক্ট করেছি এবং ডট দিয়ে click ইভেন্ট হ্যান্ডলার ব্যবহার করেছি।এখন এই প্যারাগ্রাফের উপর ক্লিক করলে (অর্থ্যাৎ ক্লিক ইভেন্ট ঘটলে) ঐটা হবে যেটা এই click() ইভেন্ট হ্যান্ডলার এর ভিতর আছে (প্রথম বন্ধনীর ভিতর)।
এখন আমার myheader ক্লাস সম্বলিত হেডার টি বের করে আনার দরকার যখন কেউ mypara ক্লাস সম্বলিত প্যারাগ্রাফে ক্লিক করবে।তাই myheader সিলেক্ট করেছি এবং show() মেথড দিয়ে বের করে এনেছি যেটা পেজ লোড হবার পর লুকানো থাকবে।show ফাংশন এভাবেই লুকানো এলিমেন্ট কে বের করে আনার জন্য ব্যবহৃত হয়।
এই হল জেকোয়েরির একদম মৌলিক ধারনা।জেকোয়েরির সাইটে গিয়ে আরও কিছু ফাংশন দেখুন এবং এভাবে ছোট ছোট কোড লিখে অনুশীলন করুন তাহলে ধারনা স্বচ্ছ হয়ে যাবে।
এবার index.html ফাইলে নিচের কোড লিখুন
01.<!DOCTYPE html>02.<html>03.<head>04.<script src="/jquery_latest.js" type="text/javascript"></script>05.<script type="text/javascript">06.$(document).ready(function(){07.$(".myheader").hide();08.$(".mypara").click(function(){09.$(".myheader").show();10.});11.});12.</script>13.</head>14.<body>15.<h2 class="myheader">JQUERY tutorials</h2>16.<p class="mypara">Webcoachbd is nice tutorial site</p>17.</body>18.</html>নিচে "Webcoachbd is nice tutorial site" এই লাইনে ক্লিক করুন
Webcoachbd is nice tutorial site
ব্যাখ্যা:৪ নম্বর লাইনটি দেখুন,এভাবে (জেকোয়েরির ফ্রেমওয়ার্কটি)
স্ক্রিপ্টটি লোড করেছি।আপনি চাইলে এই ফ্রেমওয়ার্ক অনলাইন থেকে লোড করাতে
পারেন,যেমন গুগল এই ফ্রেমওয়ার্ক তার লাইব্রেরিতে রেখেছে এবং আপনি ৪ নম্বর
লাইন বাদ দিয়ে নিচের মত লিখলেও হবে1.<script src="https://ajax.googleapis.com/ajax/libs2./jquery/1.8.1/jquery.min.js" type="text/javascript">3.</script>1.$(document).ready(function(){2.$(".myheader").hide();3.$(".mypara").click(function(){4.$(".myheader").show();5.});6.});7.</script>** $(document).ready(); এই লাইনকে সংক্ষিপ্ত করে নিচের মত করে লেখা যায়
1.$(function(){2.//code goes here3.});উল্লেখ্য যে, জেকোয়েরি কোড লেখার নিয়মই এটা যে সব আগে ডলার সাইন ($) বা jQuery
এই শব্দটি লিখে এরপর প্রথম বন্ধনীতে সিঙ্গেল বা ডাবল কোটেশন এর ভিতর সিএসএস সিলেক্টর টি লিখতে হয় (যে এইচটিএমএল এলিমেন্টটি তে কাজ করবেন তার আইডি, ক্লাস অর্থ্যাৎ তার সিলেক্টর)।সবশেষে ডট (.) চিহ্ন দিয়ে জেকোয়েরির মেথডটি দিতে হয়।যেমন আমি দিয়েছি hide() মেথড।এই মেথড সিলেক্টেড এলিমেন্টকে লুকিয়ে রাখে।এরুপ আরও অনেক ফাংশন তাদের সাইটে গিয়ে দেখতে পারেন,সেখানে বিস্তারিত বিবরন আছে।এই ফাংশনগুলিই ভালভাবে জানতে হবে এবং প্রয়োগ শিখতে হবে।
এরপরের লাইনে mypara ক্লাস সম্বলিত যে প্যারাগ্রাফটি আছে সেটি সিলেক্ট করেছি এবং ডট দিয়ে click ইভেন্ট হ্যান্ডলার ব্যবহার করেছি।এখন এই প্যারাগ্রাফের উপর ক্লিক করলে (অর্থ্যাৎ ক্লিক ইভেন্ট ঘটলে) ঐটা হবে যেটা এই click() ইভেন্ট হ্যান্ডলার এর ভিতর আছে (প্রথম বন্ধনীর ভিতর)।
এখন আমার myheader ক্লাস সম্বলিত হেডার টি বের করে আনার দরকার যখন কেউ mypara ক্লাস সম্বলিত প্যারাগ্রাফে ক্লিক করবে।তাই myheader সিলেক্ট করেছি এবং show() মেথড দিয়ে বের করে এনেছি যেটা পেজ লোড হবার পর লুকানো থাকবে।show ফাংশন এভাবেই লুকানো এলিমেন্ট কে বের করে আনার জন্য ব্যবহৃত হয়।
এই হল জেকোয়েরির একদম মৌলিক ধারনা।জেকোয়েরির সাইটে গিয়ে আরও কিছু ফাংশন দেখুন এবং এভাবে ছোট ছোট কোড লিখে অনুশীলন করুন তাহলে ধারনা স্বচ্ছ হয়ে যাবে।
0 মন্তব্য(গুলি):
Post a Comment