Jan 29

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস . AngularJS Controllers

1. লিখেছেন সুদীপ্ত সাহা

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনের ডাটাগুলো কন্ট্রোল করে। এগুলো জাভাস্ক্রিপ্টের রেগুলার অবজেক্ট।

অ্যাঙ্গুলার জাভাস্ক্রিপ্টের অ্যাপ্লিকেশনগুলো কন্ট্রোলার দ্বারা নিয়ন্ত্রণ করা হয়। ng-controller ডিরেকটিভ অ্যাপ্লিকেশন কন্ট্রোলকে নির্দেশ করে। কন্ট্রোলার হল জাভাস্ক্রিপ্টের অবজেক্ট যা অবজেক্ট কন্সট্রাক্টর গঠনের মাধ্যমে তৈরি করা হয়।

personController”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{firstName + ” ” + lastName}}
</div>

<script>
function personController($scope) {
$scope.firstName=”John”,
$scope.lastName=”Doe”
}
</script>

অ্যাপ্লিকেশনের বর্ণনাঃ
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন ng-app দ্বারা নির্দেশ করা হয়। এটি <div> এর ভেতরে রান হয়। ng-controller কন্ট্রোলার অবজেক্টের নাম নির্দেশ করে।
personController ফাংশন হচ্ছে জাভাস্ক্রিপ্টের একটি ষ্ট্যাণ্ডার্ড অবজেক্ট কন্সট্রাক্টর। অ্যাঙ্গুলার জাভাস্ক্রিপ্টে personControllerকে $scope অবজেক্ট দ্বারা কল করা হয়। এখানে $scope হল একটি অ্যাপ্লিকেশন অবজেক্ট (অ্যাপ্লিকেশনের ভ্যারিয়েবল এবং ফাংশনের ধারক)। personController, $scope অবজেক্টে দুইটি প্রপার্টি (ভ্যারিয়েবল) তৈরি করে, firstName এবং lastName।
ng-model ইনপুট ফিল্ডের কন্ট্রোলার প্রপার্টি (firstName এবং lastName) কে নির্দিষ্ট করে দেয়।

কন্ট্রোলার মেথডসঃ
এই উদাহরণটিতে কন্ট্রোলার অবজেক্টের দুইটি প্রপার্টিসহ কার্যপদ্ধতি দেখানো হয়েছেঃ lastName এবং firstName। একটি কন্ট্রোলারের মেথডও থাকতে পারে (ফাংশন অবজেক্ট প্রপার্টি হিসেবে)

<div ng-app=”” ng-controller=”personController”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{fullName()}}
</div>

<script>
function personController($scope) {
$scope.firstName = “John”,
$scope.lastName = “Doe”,
$scope.fullName = function() {
return $scope.firstName + ” ” + $scope.lastName;
}
}
</script>

এক্সটারনাল ফাইলের কন্ট্রোলারঃ
বড় ধরনের অ্যাপ্লিকেশনে কন্ট্রোলারগুলো সাধারনত এক্সটারনাল ফাইলে রাখা হয়। নিচের কোডটি personController.js নামের একটি এক্সটারনাল ফাইলে <script> ট্যাগের মধ্যে কপি করে রাখতে হবে।

অ্যাঙ্গুলার জাভাস্ক্রিপ্ট উদাহরনঃ

<div ng-app=”” ng-controller=”personController”>
First Name: <input type=”text” ng-model=”firstName”>

Last Name: <input type=”text” ng-model=”lastName”>

<br>
Full Name: {{firstName + ” ” + lastName}}
</div>

<script src=”personController.js”></script>

আরেকটি উদাহরণঃ
এই উদাহরণটির জন্য আমরা প্রথমে একটি নতুন কন্ট্রোলার ফাইল তৈরি করবঃ

function namesController($scope) {
$scope.names = [
{name:’Jani’,country:’Norway’},
{name:’Hege’,country:’Sweden’},
{name:’Kai’,country:’Denmark’}
];
}

এবং তারপর এই কন্ট্রোলার ফাইলটি অ্যাপ্লিকেশনে ব্যবহার করবঃ

<div ng-app=”” ng-controller=”namesController”>
<ul>
<li ng-repeat=”x in names”>
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>
</div>

<script src=”namesController.js”></script>

Jan 29

jQuery Traversing পদ্ধতি . JQuery – Traversing Methods

jQuery Traversing পদ্ধতি
ইন্দ্র ভূষণ শুভ

jQuery Traversing পদ্ধতি
পদ্ধতি বর্ণনা
add() একই রকম উপাদানের সেটে উপাদান যোগ করা
addBack() বর্তমান সেটের সাথে পুর্বের সেটের উপাদান যোগ করা
andSelf() ১.৮ সংস্করণ বাদে। addBack() এর অন্য নাম
children() বাছাইকৃত উপাদানের সব direct children ফিরে আসে
closest() বাছাইকৃত উপাদানের প্রথম ancestor ফিরে আসে
contents() বাছাইকৃত উপাদানের সব direct children ফিরে আসে ( টেক্সট এবং মন্তব্য
নোড সহ)
each() একই রকম প্রত্যেকটি উপাদান একটি ফাংশন সঞ্চালন করে
end() বর্তমান চেইনের সাম্প্রতিক ফিল্টারিং অপারেশন শেষ হয়, এবং একই রকম
উপাদানের সেট তার পূর্বের অবস্থাই ফিরে যায়।
eq() একটি উপাদান নির্দিষ্ট সংখ্যক সূচক সহ বাছাইকৃত উপাদানে ফিরে আসে
filter() একই রকম উপাদানের সংখ্যা এমনভাবে কমানো হয় যাতে বাছাইকৃত
উপাদানের সাথে মিলে যায় অথবা ফাংশন টেস্ট অতিক্রম করতে পারে
find() বাছাইকৃত উপাদানের Descendant উপাদান ফিরে আসে
first() বাছাইকৃত উপাদানের প্রথম উপাদান ফিরে আসে
has() যেসব উপাদানের ভিতর এক বা ততোধিক উপাদান রয়েছে তারা সবাই ফিরে
আসে
is() নির্বাচক / উপাদান / jQuery বস্তুর বিরুদ্ধে একই রকম উপাদানের সেট
পরীক্ষা করা হয়, এবং যদি একটি উপাদান প্রদত্ত আর্গুমেন্টের সাথে মিলে
যায় তাহলে সত্যি ফিরে আসে
last() বাছাইকৃত উপাদেনের শেষ উপাদান ফিরে আসে
map() একই রকম সেটের প্রতিটি উপাদান একটি ফাংশনের মধ্য দিয়ে যায়, ফিরে
আসা মান ধারনকারী jQuery বস্তু তৈরি করে
next() বাছাইকৃত উপাদেনের পরবর্তি sibling উপাদান ফিরে আসে
nextAll() বাছাইকৃত উপাদেনের সব পরবর্তি sibling উপাদান ফিরে আসে
nextUntil() সব পরবর্তি sibling উপাদান প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে ফিরে আসে
not() বাছাইকৃত উপাদান সেট থেকে উপাদান বাদ দেওয়া হয়
offsetParent() প্রথম অবস্থার parent উপাদানে ফিরে আসে
parent() বাছাইকৃত উপাদানের সরাসরি parent উপাদান ফিরে আসে
parents() বাছাইকৃত উপাদানের সব ancestor উপাদান ফিরে আসে
parentsUntil() প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে সব ancestor উপাদান ফিরে আসে
prev() বাছাইকৃত উপাদানে পূর্বের sibling উপাদান ফিরে আসে
prevAll() বাছাইকৃত উপাদানে পূর্বের সব sibling উপাদান ফিরে আসে
prevUntil() প্রদত্ত দুইটি আর্গুমেন্টের মধ্যে পূর্বের সব sibling উপাদান ফিরে আসে
siblings() বাছাইকৃত উপাদেনের সব sibling উপাদান ফিরে আসে
slice() একই রকম উপাদানের সেটকে একটি পরিসীমা সূচকের উপসেটে কমানো
হয়

Jan 29

জেক্যুয়েরি এজাক্স মেথডস . JQuery – AJAX Methods

1. লিখেছেন সুদীপ্ত সাহা

জেক্যুয়েরি এজাক্স মেথডস

এজাক্স হল কোন ওয়েব পেজকে সম্পূর্ণ রিলোড না করে সার্ভারের মধ্যে থেকে ডাটার আদান-প্রদানের মাধ্যমে ওয়েব পেজের কোন অংশের আপডেট করার একটি কৌশল।

নিচের টেবিলে জেক্যুয়েরিতে ব্যবহৃত এজাক্স মেথডগুলো তালিকাভুক্ত করা হয়েছেঃ

মেথড বর্ণনা
$.ajax() এজাক্সের async রিকোয়েস্ট সম্পাদন করা
$.ajaxPrefilter() $.ajax() মেথডে কোন রিকোয়েস্ট প্রেরণের আগে কাস্টম অপশনগুলো পরিচালনা করা অথবা বিদ্যমান অপশনগুলোকে পরিবর্তন করা
$.ajaxSetup() ভবিষ্যতে কোন AJAX রিকোয়েস্টের জন্য ডিফল্ট ভ্যালু সেট করা
$.ajaxTransport() AJAX ডাটা পরিচালনার জন্য অবজেক্ট তৈরি করা
$.get() সার্ভার থেকে AJAX HTTP GET রিকোয়েস্টের মাধ্যমে ডাটা লোড করা
$.getJSON() সার্ভার থেকে HTTP GET রিকোয়েস্টের মাধ্যমে JSON-encoded ডাটা লোড করা
$.getScript() AJAX HTTP GET রিকোয়েস্টের মাধ্যমে সার্ভার থেকে JavaScript লোড করা এবং চালু করা
$.param() ধারাবাহিকভাবে কোন অ্যারে বা অবজেক্টকে প্রদর্শন করা
$.post() AJAX HTTP POST রিকোয়েস্টের মাধ্যমে সার্ভার থেকে ডাটা লোড করা
ajaxComplete() AJAX রিকোয়েস্ট কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxError() AJAX রিকোয়েস্ট ইররসহ কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxSend() AJAX রিকোয়েস্ট প্রেরণের পূর্বে কোন ফাংশনকে রান করা
ajaxStart() AJAX রিকোয়েস্ট প্রথম শুরু হবার সময় কোন ফাংশনকে রান করা
ajaxStop() সকল AJAX রিকোয়েস্ট কমপ্লিটের পর কোন ফাংশনকে রান করা
ajaxSuccess() AJAX রিকোয়েস্ট সঠিকভাবে কমপ্লিটের পর কোন ফাংশনকে রান করা
load() সার্ভার থেকে ডাটা লোড করা এবং সিলেক্টেড ইলিমেন্টে ডাটা রিটার্ন করা
serialize() সাবমিশনের জন্য ফর্মের উপাদানগুলোকে স্ট্রিংএ এনকোডিং করা
serializeArray() ফর্মের উপাদানগুলোকে নেম এবং ভ্যালু অনুযায়ী অ্যারেতে এনকোডিং করা

 

Jan 29

jQuery ট্রাভার্সিং-ফিল্টারিং । JQuery Traversing – Filtering

লিখেছেন সুদীপ্ত সাহা

 

জেক্যুয়েরি ট্রাভার্সিং – ফিল্টারিং

ইলিমেন্টের ন্যারো-ডাউন সার্চ

বহুল ব্যবহৃত তিনটি প্রাথমিক ফিল্টারিং মেথড হল first(), last() এবং eq()। এগুলো ব্যবহার করে অনেক ইলিমেন্ট থেকে কোন নির্দিষ্ট ইলিমেন্টকে অবস্থান অনুযায়ী খুঁজে বের করা সম্ভব।

অন্যান্য ফিল্টারিং মেথড যেমন filter() এবং not() এগুলো ব্যবহার করে ইলিমেন্টকে খুঁজে বের করে যায় যা কখনো নির্দিষ্ট বৈশিষ্ট্যের সাথে ঠিকভাবে মিলে আবার কখনো মিলে না।

 

জেক্যুয়েরি first() মেথড

first() মেথড কোন নির্দিষ্ট ইলিমেন্টের প্রথম উপাদানকে (এলিমেন্টকে) রিটার্ন করে।
নিচের উদাহরণটি কোন <div> এর প্রথম <p> ইলিমেন্টকে সিলেক্ট করেঃ

$(document).ready(function(){
    $("div p").first();
});

ফলাফল : first()

জেক্যুয়েরি last() মেথড

last() মেথড কোন নির্দিষ্ট ইলিমেন্টের শেষ উপাদানকে (এলিমেন্টকে) রিটার্ন করে।
নিচের উদাহরণটি কোন <div> এর শেষ <p> ইলিমেন্টকে সিলেক্ট করেঃ

$(document).ready(function(){
    $("div p").last();
});

ফলাফল : last()

 

জেক্যুয়েরি eq() মেথড

eq() মেথড কোন নির্দিষ্ট ইলিমেন্টের নির্দিষ্ট ইনডেক্স নাম্বার অনুযায়ী উপাদানকে রিটার্ন করে।

ইনডেক্স নাম্বার সবসময় ০ থেকে শুরু হয়, তাই প্রথম উপাদানের ইনডেক্স নাম্বার হবে ০, ১ নয়।

নিচের উদাহরণটি <p> এর দ্বিতীয় ইলিমেন্টকে সিলেক্ট করে (ইনডেক্স নাম্বার ১)

$(document).ready(function(){
    $("p").eq(1);
});

ফলাফল : eq()

 

জেক্যুয়েরি filter() মেথড

filter() মেথডের সাহায্যে আপনি একটি নির্দিষ্ট বৈশিষ্ট্য ঠিক করে দিতে পারবেন। যেই উপাদানগুলো বৈশিষ্ট্যের সাথে মিলবে না সেগুলো সিলেকশন থেকে বাদ পড়বে এবং যেগুলো মিলবে সেগুলো রিটার্ন করবে।

নিচের উদাহরণটি <p> এর যেসকল উপাদান “intro” ক্লাসের অন্তর্ভুক্ত সেগুলো রিটার্ন করেঃ

$(document).ready(function(){
    $("p").filter(".intro");
});

ফলাফল : filter()

 

জেক্যুয়েরি not() মেথড

not() মেথড সেই উপাদানগুলো রিটার্ন করবে যেগুলো বৈশিষ্ট্যের সাথে মিলবে না।

ইঙ্গিতঃ not() মেথড হল filter() মেথডের বিপরীত

নিচের উদাহরণটি <p> এর যেসকল উপাদান “intro” ক্লাসের অন্তর্ভুক্ত নয় সেগুলো রিটার্ন করেঃ

$(document).ready(function(){
    $("p").not(".intro");
});

ফলাফল : not()

 

Jan 29

jQuery তে Siblings খোঁজা

jQuery তে Siblings খোঁজা
ইন্দ্র ভূষণ শুভ

Siblings একই parent ভাগাভাগি করে।
আপনি jQuery দিয়ে একটি উপাদানের Siblings গুলো DOM ট্রির পার্শ্বাভিমুখে খুঁজতে পারেন।

DOM ট্রির আশেপাশে খোঁজা
DOM ট্রির আশেপাশে খোঁজার জন্য অনেক ধরনের jQuery পদ্ধতি আছেঃ
• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

jQuery তে siblings() পদ্ধতি
siblings() পদ্ধতিতে বাছাইকৃত উপাদানে সকল siblings উপাদান ফিরে আসে।
নিচের উদাহরণটি <h2> সকল siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).siblings();
});
নিজে চেষ্টা করুন >>
আপনি আপনার ইচ্ছা মত পরিমাপক ব্যবহার করতে পারেন siblings অনুসন্ধানকে ফিল্টার করার জন্য।
নিচের উদাহরণটি <h2> সকল siblings উপাদান ফিরিয়ে আনে যা

উপাদানঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).siblings(“p”);
});
নিজে চেষ্টা করুন >>

jQuery তে next () পদ্ধতি
next () পদ্ধতি বাছাইকৃত উপাদানে পরবর্তী siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি <h2> পরবর্তী siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).next();
});
নিজে চেষ্টা করুন >>

jQuery তে nextAll () পদ্ধতি
nextAll () পদ্ধতি বাছাইকৃত উপাদানে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি <h2> পরবর্তী সকল siblings উপাদান ফিরিয়ে আনেঃ
উদাহরণ
$(document).ready(function(){
$(“h2”).nextAll();
});
নিজে চেষ্টা করুন >>

jQuery তে nextUntil() পদ্ধতি
nextUntil() পদ্ধতি দুইটি আর্গুমেন্টের মধ্যে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনে।
নিচের উদাহরণটি

এবং <h6> উপাদানের মধ্যে পরবর্তী সকল siblings উপাদান ফিরিয়ে আনেঃ

উদাহরণ
$(document).ready(function(){
$(“h2”).nextUntil(“h6”);
});
নিজে চেষ্টা করুন >>

jQuery তে prev(), prevAll() এবং prevUntil() পদ্ধতিঃ
prev(), prevAll() এবং prevUntil() পদ্ধতি উপরে বর্ণিত পদ্ধতির মতই কাজ কওরে কিন্তু কার্যকারিতা বিপরীতঃ তারা পুর্বের siblings উপাদান ফিরিয়ে আনে (DOM ট্রির সামনে খোঁজার বদলে পেছনের দিকে খুজতে থাকে )।

jQuery তে খোঁজার রেফারেন্সঃ
jQuery Traversing পদ্ধতির উপর পরোপুরি ধারনা লাভের জন্য, jQuery Traversing Reference পেইজটিতে যান।

Jan 29

জেকুয়্যেরি ট্রাভেসিং-ডিসেন্ডেন্টস . জেকুয়্যেরির সাহায্যে আপনি DOMট্রি কে ট্রাভার্স ডাউনের মাধ্যমে কোন ইলিমেন্ট্র ডিসেন্ডন্টগুলো খুজে দেখতে পারবেন।

1. লিখেছেন সুদীপ্ত সাহা

জেকুয়্যেরি ট্রাভেসিং-ডিসেন্ডেন্টস
ডিসেন্ডেন্টস হল চাইল্ড, গ্র্যান্ডচাইন্ড, গ্রেট-গ্র্যান্ডচাইন্ড এবং একইভাবে আরও… অর্থাৎ উত্তরসূত্রি। জেকুয়্যেরির সাহায্যে আপনি DOMট্রি কে ট্রাভার্স ডাউনের মাধ্যমে কোন ইলিমেন্ট্র ডিসেন্ডন্টগুলো খুজে দেখতে পারবেন।
DOMট্রি এর ট্রাভাসিং ডাউন
DOMট্রি কে ট্রাভাসিং ডাউনের জন্য দুটি উপযোগী জেকুয়্যেরি মেথড হলঃ
▪children()
▪ find()

জেকুয়্যেরি children() মেথড
children() মেথড কোন সিলেক্টেড ইলিমেন্টের সকল ডিরেক্ট চিলড্রেনকে রিটার্ন করে। এই মেথড DOMট্রি কে শুধুমাত্র একটি লেভেলে ট্রাভাসি ডাউন করে। নিচের উদাহরনটি প্রত্যেক <div> এর সকল ডিরেক্ট চিলড্রেন ইলিমেন্টকে রিটার্ন করেঃ
$(document).ready(function(){
$(“div”).children();
});

সার্চ রেজাল্টের জন্য চিলড্রেন ইলিমেন্টকে ফিল্টার করতে আপনি অপশনাল একটি প্যারামিটার ব্যবহার করতে পারেন। নিচের উদাহরনটি প্রত্যেক <div> এর <p> ইলিমেন্ট এবং ক্লাসনেম “1” এরকম সকল ডিরেক্ট চিলড্রেনকে রিটার্ন করেঃ
$(document).ready(function(){
$(“div”).children(“p.1”);
});

জেকুয়্যেরি find()মেথড
find() মেথড ফেরত আনে ডিসেন্ডেন্ট ইলিমেন্ট সমূহের নির্ধারিত ইলিমেন্ট। নিচের উদাহরনটি প্রত্যেক <span> ইলিমেন্ট এরকম ডিসেন্ডেন্টকে <div>: রিটার্ন করেঃ
$(document).ready(function(){
$(“div”).find(“span”);
});

নিচের উদাহরনটি রিটার্ন করে প্রত্যেক ডিসেন্ডেন্টকে <div>:
$(document).ready(function(){
$(“div”).find(“*”);
});

Jan 29

jQuery ট্র্যাভার্সিং – অ্যানসেস্টরস

শেখ মাহফুজুর রহমান

 

jQuery ট্র্যাভার্সিং – অ্যানসেস্টরস

অ্যানসেস্টর (Ancestors) এর বাংলা হলো পূর্বপুরুষ অর্থাৎ পিতা, পিতামহ, প্রপিতামহ ইত্যাদি। যারা এইচটিএমএল বা এক্সএইচটিএমএল( HTML এবং XHTML) নিয়ে কাজ করেন তারা নিশ্চয়ই জানেন যে এই দু’টো ডকুমেন্ট ল্যাঙ্গুয়েজের এলিমেন্ট বা ট্যাগগুলোও ঠিক একই ধরণের সম্পর্ক রীতি মেনে চলে! তো, জেকোয়ারির মাধ্যমে আমরা এই দুটো ল্যাঙ্গুয়েজের ডম ট্রি(DOM tree) ট্র্যাভার্স বা আরোহন করে কোন এলিমেন্টের পূর্বপুরুষদের খুঁজে পেতে পারি।

 

ডম ট্রি আরোহন (Traversing)

ডম ট্রি আরোহন করার তিনটি কার্যকর জেকোয়ারি মেথড বা পদ্ধতি হলোঃ

  • parent()
  • parents()
  • parentsUntil()

 

জেকোয়ারি parent() মেথড

parent() মেথড কোন নির্বাচিত এলিমেন্টের ডাইরেক্ট প্যারেন্ট এলিমেন্ট অর্থাৎ নির্বাচিত এলিমেন্টটি ঠিক পূর্বের যে এলিমেন্টের সন্তান সেই এলিমেন্টকে (পিতাকে) ফেরত (Return) দেয়। এই পদ্ধতি ডম ট্রি’র শুধুমাত্র একটি ধাপকে আরোহন করতে পারে।

নিচের উদাহরণটি প্রত্যেকটি <span> এলিমেন্টের ডাইরেক্ট প্যারেন্ট বা পিতাকে ফেরত দেয়ঃ

$(document).ready(function(){
    $("span").parent();
});

ফলাফল : parent()

 

জেকোয়ারি parents() মেথড

এই পদ্ধতিটি কোন নির্বাচিত এলিমেন্টের সবগুলো অ্যানসেস্টরকে ফেরত দেয়, একেবারে ডকুমেন্টের রুট অর্থাৎ <html> এলিমেন্ট পর্যন্ত যতগুলো এলিমেন্ট বা ট্যাগের সাথে ঐ নির্বাচিত এলিমেন্টের সম্পর্ক আছে সেই সবগুলো এলিমেন্টকে খুঁজে পাওয়া যায়।

নিচের উদাহরণে, parents() মেথড সবগুলো <span> এলিমেন্টের সমস্ত পূর্বপুরুষকে ফেরত দেয়ঃ

$(document).ready(function(){
    $("span").parents();
});

ফলাফল : parents()

 

আনসেস্টর বা পূর্বপুরুষ খুঁজে পাওয়ার ক্ষেত্রে আপনি কিছু অপশনাল-প্যারামিটার ব্যবহার করতে পারেন যার ফলে আপনি আপনার সার্চকে ফিল্টার করতে পারবেন।

লক্ষ্য করুন, নিচের উদাহরণটি সব এলিমেন্টের সবগুলো <ul> অ্যানসেস্টর এলিমেন্ট কে ফেরত দেয়ঃ

$(document).ready(function(){
    $("span").parents("ul");
});

ফলাফল : আনসেস্টর

 

জেকোয়ারি parentsUntil() মেথড

parentsUntil() মেথড দুটো নির্দিষ্ট এলিমেন্টের মধ্যকার সবগুলো অ্যানসেস্টর এলিমেন্টকে ফেরত দেয়।

নিচের উদাহরণে, <span> এবং <div> এলিমেন্টের মধ্যকার সবগুলো অ্যানসেস্টর এলিমেন্টকে খুঁজে পাওয়া গেছেঃ

$(document).ready(function(){
    $("span").parentsUntil("div");
});

ফলাফল : parentsUntil()

Jan 29

jQuery আরোহন । jQuery traversing

jQuery আরোহন কি?

jQuery অভিমুখ যার অর্থ “মধ্য দিয়ে অগ্রসর“, এইচটিএমএল এলিমেন্ট কে অন্য এলিমেন্ট এর সাথে সম্পর্কের ভিত্তিতে খুজে বের করা বা সিলেক্ট করার জন্য ব্যবহৃত হয়। একটি নির্বাচিত এলিমেন্ট থেকে শুরু হয় এবং আপনার কাঙ্খিত এলিমেন্ট পর্যন্ত সিলেকশন চালিয়ে যায়।

নীচের ছবিটি একটি ফ্যামিলি ট্রি প্রকাশ করে। jQuery traversing এর মাধ্যমে, আপনি সহজেই ফ্যামিলি ট্রির উপর (ancestors), নীচে (descendants), আশেপাশে (siblings) ঘুরতে পারেন, যেটা শুরু হবে আপনার বাছাইকৃত (current) উপাদান দিয়ে। এই গতিবিধিকে Traversing অথবা moving through বলে।

অভিমুখ

চিত্রের ব্যখ্যা

  • <div> হলো <ul> এর পিতা এবং এর ভেতরের সবকিছুর পূর্বপুরুষ
  • <ul> হলো উভয় <li> উপাদানের পিতা, এবং <div> এর সন্তান
  • বামের <li> উপাদান <span> এর পিতা, <ul> এর সন্তান এবং <div> এর বংশধর
  • <span> উপদান বামের <li> এর সন্তান, এবং <ul> ও <div> এর বংশধর
  • দুইটা <li> হলো ভাইবোন ( তারা একই parent ভাগাভাগি করে )
  • ডানের <li> উপাদান <b> এর পিতা, <ul> এর সন্তান এবং <div> এর বংশধর
  • <b> উপাদান ডানের <li> এর সন্তান এবং <ul> ও <div> এর বংশধর

পূর্বপুরুষ হলো একাধারে পিতা, পিতামহ, মহান পিতামহ এবং আরও।

বংশধর হলো একাধারে সন্তান, নাতি, নাতির সন্তান এবং আরও।

ভাইবোন একই parent ভাগাভাগি করে।

 

Traversing the DOM

jQuery বিভিন্ন ধরনের মেথড প্রদান করে, যা DOM কে traverse করার অনুমতি দেয়।

Traversal পদ্ধতির মধ্যে tree-traversal হল সবচেয়ে বড় পদ্ধতি।

পরবর্তি অধ্যায় দেখাবে কিভাবে DOM ট্রির উপরে, নীচে এবং আশেপাশে যাওয়া যায়।

 

Jan 29

jQuery এর সেট কনটেন্ট এবং এট্রিবিউটস

লিখেছেন সুদীপ্ত সাহা

 

সেট কনটেন্ট – text(), html(), and val()

কনটেন্ট সেট করার জন্য আমরা তিনটি পদ্ধতি ব্যবহার করব।

  • text()নির্বাচিত টেক্সট কন্টেন্ট ফেরৎ
  • html()নির্বাচিত ইলিমেন্টের কন্টেন্ট ফেরৎ (HTML মার্কআপ সহ)
  • val()ফর্ম এর ভেলু ফেরতের ক্ষেত্রে

কিভাবে jQuery text(), html(), এবং val() সেট করতে হয় তা নিম্নলিখিত উদাহরণে দেখানো হল।

উদাহরণ

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

ফলাফল : jQuery text(), html(), এবং val()

 

একটি কলব্যাক ফাংশন এর জন্য text(), html(), এবং val()

উপরোক্ত তিনটি jQuery পদ্ধতি text(), html() এবং val() এর মাধ্যমে কলব্যাক ফাংশন তৈরি করা যায়। এই কলব্যাক ফাংশন এর দুটি প্যারামিটার আছে। index er বর্তমান তালিকার নির্বাচিত ইলিমেন্ট এবং অরজিনাল ভ্যালু (পুরাতন)। এর পরে আপনি নতুন স্ট্রিং এ ফেরত গিয়ে আপনি ফাংশনে নতুন ভ্যালু ব্যবহার করতে করতে পারেন। নিম্নলিখিত উদাহরণে text() এবং html() এর সাহায্যে একটি কলব্যাক ফাংশন,

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")";
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")";
    });
});

ফলাফল : কলব্যাক ফাংশন এর জন্য text(), html(), এবং val()

 

সেট এট্রিবিউটস : Attr ()

JQuery এর Attr () এট্রিবিউটসটি ভ্যালু সেট এবং পরিবর্তন এর কাজে ব্যবহার করা হয়। নিম্নলিখিত উদাহরণে আমরা দেখব কিভাবে হাইপার লিঙ্কের মান পরিবর্তন করতে হয়।

$("button").click(function(){
    $("#w3s").attr("href", "http://www.w3schools.com/jquery");
});

ফলাফল : Attr ()

 

Attr () এট্রিবিউট এর মাধ্যম আপনি একই সময়ে একধিক ইলিমেন্ট সেট করতে পারবেন। নিম্নলিখিত উদাহরণে আমরা দেখব Attr () এট্রিবিউট এর মাধ্যমে একই সময়ে একধিক ইলিমেন্ট ব্যবহার,

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});

ফলাফল : attr()

 

একটি কলব্যাক ফাংশনে Attr () এট্রিবিউট

JQuery পদ্ধতিতে কলব্যাক ফাংশন এর জন্য Attr () এট্রিবিউট খুবই গুরুত্তপুর্ন। এই কলব্যাক ফাংশন এর দুটি প্যারামিটার আছে। index er বর্তমান তালিকার নির্বাচিত ইলিমেন্ট এবং অরজিনাল ভ্যালু(পুরাতন)। এর পরে আপনি নতুন স্ট্রিং এ ফেরত গিয়ে আপনি ফাংশনে নতুন ভ্যালু ব্যবহার করতে করতে পারেন। নিম্নলিখিত উদাহরণে Attr () এট্রিবিউট এর সাহায্যে একটি কলব্যাক ফাংশন,

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery";
    });
});

ফলাফল : সেট এট্রিবিউটস Attr ()

 

Jan 29

জেকোয়ারি – কনটেন্ট ও এলিমেন্ট পাওয়া বা নির্বাচন করা

Sheikh Mahfuzur Rahman
Author at BloggersEcho.Com
Bengali Word Count: 280
জেকোয়ারি – কনটেন্ট ও এলিমেন্ট পাওয়া বা নির্বাচন করা

ওয়েব স্ক্রিপ্টিং ল্যাঙ্গুয়েজগুলোর মধ্যে জেকোয়ারি(jQuery) হলো অত্যন্ত গুরুত্বপূর্ণ ও শক্তিশালী একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ। জেকোয়ারি হলো এমন কতগুলো পদ্ধতি বা কৌশল এর সমন্বয় যার মাধ্যমে এইচটিএমএল(HTML) বা এক্সএইচটিএমএল(XHTML) ডকুমেন্টের যেকোন এলিমেন্ট বা এট্রিবিউটকে নির্বাচন এবং পরিচালনা করা সম্ভব।

জেকোয়ারি ডম ম্যানিপিউলেশন(Manipulation)

জেকোয়ারির একটি গুরুত্বপূর্ণ অংশ হলো ডমকে(DOM) ম্যানিপিউলেট বা প্রয়োজনমতো পরিচালনা করা। প্রথমে জেনে নেয়া যাক ডম কিঃ

ডম হলো ডকুমেন্ট অবজেক্ট মডেল(Document Object Model) যা এইচটিএমএল এবং এক্সএইচটিএমএল ডকুমেন্টকে অ্যাক্সেস করার আদর্শ(Standard) নির্ধারিত করে দেয়। অর্থাৎ পুর্বোক্ত দুটি ভাষাকে( HTML ও XHTML) কোন পদ্ধতি ব্যবহার করে প্রোগ্রামিং করা যাবে তা নির্ধারণ করে ডম। ডব্লিওথ্রিসি’র(W3C) সংজ্ঞানুযায়ী ডম হলো একটি প্লাটফর্ম এবং ল্যাঙ্গুয়েজ-নির্বিশেষ ইন্টারফেস যা প্রোগ্রাম ও স্ক্রিপ্টসমূহকে (যেমন JavaScript, jQuery) ডাইনামিকভাবে কোন ডকুমেন্টের কন্টেন্ট, স্ট্রাকচার(গঠন) এবং স্টাইল অ্যাক্সেস ও আপডেট করার সুযোগ করে দেয়।

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

কন্টেন্ট নির্বাচন – text(), html(), এবং val()

ডম ম্যানিপিউলেশন করার তিনটি সহজ কিন্তু কার্যকর পদ্ধতি হলোঃ

text() – কতগুলো নির্বাচিত এলিমেন্টের টেক্সট কনন্টেকে নির্ধারণ(Set) বা ফেরত(Return) পাঠায়
html() – নির্বাচিত এলিমেন্টগুলোর(এইচটিএমএল মার্কআপসহ) কন্টেন্ট নির্ধারণ অথবা ফেরত পাঠায়।
val() – ফর্ম ফিল্ডগুলোর মান(Value) নির্ধারণ বা ফেরত পাঠায়।

কিভাবে text() এবং html() মেথডের মাধ্যমে কন্টেন্ট পাওয়া বা নির্বাচন যায় তা নিচের উদাহরণটির মাধ্যমে বুঝা যাবেঃ

$(“#btn1”).click(function(){
alert(“Text: ” + $(“#test”).text());
});
$(“#btn2”).click(function(){
alert(“HTML: ” + $(“#test”).html());
});

নিচের উদাহরণটি জেকোয়ারি val() মেথডের মাধ্যমে কোন ইনপুট ফিল্ডের মান নির্বাচন করার() কৌশল ব্যাখ্যা করা করেঃ

$(“#btn1”).click(function(){
alert(“Value: ” + $(“#test”).val());
});

এট্রিবিউট নির্বাচন – attr()

কোন এইচটিএমএল বা এক্সএইচটিএমএল ডকুমেন্টের এট্রিবিউটগুলোর ভ্যালু এই মেথডের মাধ্যমে পাওয়া যায়। নিচের উদাহরণটি দেখুন, কোন লিংকে কিভাবে এট্রিবিউটের ভ্যালু পাওয়া সম্ভব তা এর মাধ্যমে বুঝা যাবেঃ

$(“button”).click(function(){
alert($(“#w3s”).attr(“href”));
});

এই ছিল জেকোয়ারির মাধ্যমে এইচটিএমএল ও এক্সএইচটিএমএল ডকুমেন্ট এর কন্টেন্ট ও এট্রিবিউট নির্বাচন বা পাওয়ার উপায়। পরবর্তী টিউটোরিয়ালে কন্টেন্টের ভ্যালু বা মান নির্ধারণ ও পরিবর্তন করার ব্যাপারে আলোচনা করা হবে।