Archive

Archive for the ‘JQuery’ Category

jQuery bangla tutorial part-3

November 14, 2009 1 comment

আমি jQuery Object Accessors সর্ম্পকে বলব,এর অর্থ থেকেই হয়তবুজে গিয়েছেন এদের কাজ হল
document এর object গুলোকে access
করা।
each():
$(“a”).click(function () {
$("div").each(function (i) {
if (this.style.color != "red") {
this.style.color = "red";
} else {
this.style.color = "";
}
});
});

এখানে আমি নামের একটা link খুজছি যেটাতে click করলে পুরো document-এ যতগুলো div element আছে তাদের সবার color red না থাকলে red কর,আর red থাকলে এদের আগে যে color ছিল তা কর।
এখন আপনার প্রশ্ন হতে পারে document এ ত আরো অনেক link থাকতে পারে তখন?উত্তর হল সে সময় আপনি যদি প্রতিটা link এর id বা class আলাদা করে দেন তাহলে পরবর্তীতে দেখবেন কিভাবে আপনি এই id বা class এর মাধ্যমে specifically কোনলিঙ্ক element কে select করে action assign করতে পারবেন।কি এখন তবুজতে পারছেন jQuery আসলেই সহজ।আসলে jQuery কে বানানোই হয়েছে এই উদ্দেশ্যে ।যাতে খুব কম code লেখে javascript এর অনেক বড় কাজ করা যায়।
আপনি যদি dom বুঝেন তাহলে লক্ষ করলে দেখবেন উপরের এই কাজটুকু যদি করতে আপনাকে হয়ত 10-20 বা আরো বেশি লাইনের বেশি code লেখতে হতে পারে।তার চেয়ে এটা ব্যবহার করা সহজ নয় কি?
size():
$(document.body).click(function () {
$(document.body).append($("

<div>”));
var n = $(“div”).size();
$(“span”).text(“There are ” + n + ” divs.” +
“Click to add more.”);
}).click(); // trigger the click to start

এখানে দেখুন আপনি যখন document.body তে click করবেন তখন
document.body তে আমি $(html) এর মাধ্যমে একটি

element add করছি।তবে এবার করছি একটু ভিন্নভাবে তাই না?একটু খেয়ালকরলে দেখবেন দুটা আসলে একই।এখন ভাবুনতো আমি আপনাকে দেব আর আপনি আমার কাছ থকে নিবেন ,এ দুটার মধ্যে পার্থক্য কি?হা হা হা,একই তাই না?প্রথম আমি element তৈ্রি করে তা document body তে append করতে বলেছি এখন document body তে append করতে বলছি div নামের একটা element কে। তারপর n নামের একটি variable এর ভেতর total document এ কতগুলো div element আছে তা গননা করে একটা integer মান রাখছি size() function এর মাধ্যমে।
তারপর “span” নামের কোন element থাকলে এর ভেতর text এর মাধ্যমে লেখছি div কয়টা আছে।আর সবশেষে আমি নিজেই একটা click করে দিচ্ছি document ready
হওয়ার সাথে সাথে click() এর মাধ্যমে “একে সাধারন ভাষায় বলে trigger করা”।এখন আপনি লক্ষ করে দেখবেন আপনি যতবার click করছেন ততবার একটি করে div add হচ্ছে আপনার document এ, এবং span এর ভেতর লেখাও প্রতিবার change হচ্ছে। সবচেয়ে ভাল হয় আপনি যদি আপনি css এর মাধ্যমে div এর border , color দিয়ে দিলে । এ কাজটি করতে পারেন css এর মাধ্যমে,আপনি নিচের কোডটি head এর মাঝখানে লিখুন।

div { width:30px; height:20px; margin:6px; float:left;
background:red; }
span { color:red; }

length:
$(document.body).mouseout(function () {
$(document.body).append($("

<div>”));
var n = $(“div”).length;
$(“span”).text(“There are ” + n + ” divs.” +
“Click to add more.”);
}).trigger(‘mouseout’);
আসলে length এবং size() এর কাজ একই ।তাই আমি আর বেশি কিছু বললাম না length সম্পর্কে ।তবে এখানে একটা কথা বলি trigger নিয়ে ।trigger ও jquery র আর একটি function. size() এর উদাহরণ এ প্রথম click টা আমি
কিভাবে করেছিলাম? Code এর শেষে click() দিয়ে trigger করে। তাই না? এখানে ও একই কাজ করেছি ।তবে একটু ভিন্নভাবে, trigger function দিয়ে। আমি trigger function এর ভেতর বলে দিচ্ছি তুমি mouseout নামে যে event টি আছে সেটি execute কর প্রথম বার page ready হওয়ার সাথে সাথে ।সে ও তাই page ready হওয়ার সাথে সাথেই mouseout নামের event
টি execute করে ।
And that’s it for today..
one thing again–আমি এই টিউটরিয়ালটা-ও first টিউটরিয়ালটা-r সাথেই লিখেছিলাম। খালি copy-paste করার বাকি ছিল।
and it was last part that was written but now i’ve to write again
for new tutorial
..
And HAVE A GOOD PROGRAMMING

Advertisements
Categories: JavaScript, JQuery

jQuery bangla tutorial part-2

November 8, 2009 Leave a comment

আমি যে উদাহরণ গুলো দেখাব তাতে আমি সম্পুর্ণ কোড দেখাব না।jQuery র কোড গুলো আপনাকে আবশ্যই এর ভেতর tag দিয়ে লেখতে হবে।
Javascript এ যারা window.onload() function নিয়ে কাজ করেছেন তারা হয়ত খেয়াল করেছেন, এর মাধ্যমে কল করা কোন ফাংশন তখনই execute হয় যখন page এর সব object ও content load হয় ।মানে হচ্ছে কোন image যদি কোন কারণে লোড না হতে পারে তাহলে আপনার onload() এর দ্বারা যে ফাংশন কল করা হয়েছে তা আর execute হবে না।jquery তে .ready() function অনেকটা onload এর মত।difference হল এটাতে কোন page এর dom object গুলো যদি jquery হাতে পায় তাহলেই সে তার কাজ শুরু করে দেয় ।আর dom কে আপনি html এর বড় ভাই-ই বলতে পারেন তাই এগুলো একটু তাড়াতাড়ি-ই load হয় ।কারন,আপনি যদি আমাকে বলেন,তাহলে আমি বলব একটি page এ h1 নামের কোন element থাকলে সেটা লোড হতে যদি কোন সমস্যা না হয় তাহলে dom load হতেও কোন সমস্যা হওয়ার কথা না।
আর একটা জিনিস হল ready() function টি আপনার যতবার দরকার ততবার-ই কল করতে পারবেন ।
মাঝে মাঝে $(document).ready() ; কে “ $(); “ দিয়ে replace করে shortcut-এ

$ (function(){ your code here });

লেখা হয়।
চলুন এখন jQuery function গুলোর দিকে নজর দেই
jQuery( html ) / $(html):
ধরুন আপনি চাচ্ছেন user কে তার action এর উপর depend করে কোন লেখা দেখাবেন,যেমন

$(document).ready(
function(){
$("

Hello

").appendTo("body");
}
);

এখনই কোন action define করলাম না বুঝার সুবিধার জন্য।এই কোডটি আপনার page এ একটা Hello লেখা দেখাবে।এখানে যা হল,তা হচ্ছে
আমরা $(এখানে html code লেখেছি) পরে তা appendeTo() দিয়ে html body তে add করেছি ।যদিও আপনি html source code দেখলে Hello লেখা খুজে পাবেন না। পরে action assign করলে আরও ভালো করে এ জিনিসটি বুঝবেন আর এর কাজটা দেখবেন কত মজার।
চলুন এটাতে একটা action assign করি

$("

Hello

").appendTo("body").click(function(){$(this).text(“jQuery”)});

এখানে আমি যা করতে চাচ্ছি তা হল Hello লেখাটিতে যখন কেউ click করবে তখন একটা function কাজ করুক,এবং ‘this’ means->

এর মধ্যেই

“jQuery লেখাটা দেখাও,যেখানে Hello লেখাটা আছে এবং আমরা এ কাজটি করছি .text() এর মাধ্যমে।দেখলেনত কত মজার।এভাবে আরও কিছুদুর এগুলে আপনি নিজেই user এর এক click এ পুরো page এর চেহারা বদলে দিতে পারবেন।এখানে text() এর কাজ নিয়ে আমরা পরে বিস্তারিত বলব।

আমি এই টিউটরিয়ালটা first টিউটরিয়ালটা-r সাথেই লিখেছিলাম। খালি copy-paste করার বাকি ছিল। করব করব বলে করা হয়ে উঠে নাই।আজ করে ফেললাম।

you can find similar post in
beacoder
if you have any question you are welcome…

And HAVE A GOOD PROGRAMMING

Categories: JavaScript, JQuery

jQuery bangla tutorial part-1

August 26, 2009 3 comments

কিছুদিন আগে আমি jQuery নিয়ে ঘাটাঘাটি করেছিলাম। হঠাৎ মনে হলো যা শিখলাম তা শেয়ার করছি না কেন? এটা করলেত আমারই লাভ
।সোজা কথায় বলতে গেলে আমি চাচ্ছি আমার সীমিত knowledge আমি সবার সাথে শেয়ার করতে।আমার বলার মাঝে কোন ভুল থাকলে তা অবশ্যই শুধরে দিবেন।তাহলে চলুন শুরু করি।

সোজা ভাষায় jQuery আর কিছুই না,javascript দিয়ে তৈরি একটা বিশাল library।মানে আপনি যদি javascript এ নিজেকে বস মনে করেন তাহলে আপনি নিজেই এরকম একটা library বানাতে পারবেন।বিশাল এ কারনে যে এটা এখন শুধু john resig এর না।এটার popularity এতই,যে এটাকে develop করার জন্য সবাই কাজ করে যাচ্ছে।ohhh, sorry আমি কি বলছি আপনাদের? john resig এই library টি তৈরী করেছেন।

যা হোক কথা বেশি বলা ভাল না। চলুন code-এ যাই।
প্রথম কাজ -ত library টা download করা।এটা আপনি কষ্ট করে http://jquery.com থেকে download করে নিন। latest টাই download কইরেন।

এখন আপনার htm file -এ অন্য সব js file এর মত import koren.

$(document).ready(
function(){
$(document.body).css( "background", "black" );
}
);

এখন প্রথম ” $ ” -র কথা বলি।আসলে এটা দিয়ে jQuery কে বলে দেয়া হচ্ছে কার উপর কাজ বা function effect ফেলতে হবে।
আপনাকে এটা দিয়েই করতে হবে এমন কোন কথা নাই।কারন মাঝে মাঝে আপনি হয়ত আরো library import করবেন,যেখানে “$” use করতে হবে ঐ library-r জন্য, তখন আপনি কি করবেন? এ সময় আপনি শুধু jquery কে বলে দিন তুমি “$” নিয়ে কোন রকম গন্ডগোল করবানা । এর জন্য অবশ্য নিচের মত একটি line আপনাকে সবার উপর লেখতে হবে।


jQuery.noConflict();

এরপর jquery import করে যেখানে “$” use করতেন, সেখানে লেখুন “jQuery”।

এখন first কোডটি দেখুন। এখানে আমি jquery কে বলছি তুমি document যখন ready হবে তখন এর body র background color black করে দাও। কিন্তু javascript ত এরকম কিছু করতে পারে না? তাহলে?একটা question হতে পারে এটা নিয়ে।এটার উত্তর হলো, css পারে।আমরা css -এ কিভাবে body background color দেই?

BODY { background-color:black; }

আর আমরা ঠিক এ কাজটি-ই করেছি উপরে .css() এর মাধ্যমে। javascript dom এর মাধ্যমে আপনি নিজেও এ কাজটি করতে পারেন।jquery ও এই dom এর মাধ্যমে এ কাজটি করেছে।এটাকে আসলে বলা হয় “Document Object Model”।আপনি যদি এটা ভাল পারেন তাহলেই বলা যায় আপনি “javascript ninja”।এটা আসলে বিশাল আলোচনার বিষয়।
আমি আর ওদিকে যাচ্ছি না।
আমার পরে .css() এর আর-ও কাজ দেখব।

আজ এখানেই শেষ করলাম।
And “HAVE A GOOD PROGRAMMING”

————
আমি এই পোষটটা অনেকদিন আগে লিখেছিলাম ।আপনি অরিজিনাল পোষটটা ইচছা করলে নিচের ঠিকানায় দেখতে পারেন।
হঠাৎ মনে হলো নিজের বলগে এটা কপি পেষট মেরে দিই।আর বলগটা আর একটু rich করি।
and just trying to you know what i mean….
http://forum.beacoder.com/viewtopic.php?f=51&t=64&start=0

Categories: JavaScript, JQuery