একটি বাটন ফাংশন

আমাদের জাভাস্ক্রিপ্টের পরিচিতি কোর্সটি করা থাকলে, আমরা অবশ্যই লজিক চ্যালেঞ্জে সহজ কিছু বাটন তৈরি করেছিলাম, আমাদের তৈরি করা প্রথম বাটন এবং স্মার্ট বাটন। ভুলে যাওয়াটা অস্বাভাবিক নয়, এজন্য আবারও দেখা যাক কীভাবে একটি সহজ বাটন তৈরি করতে হয়।

প্রথমত, একটি বাটনের ন্যূনতম বৈশিষ্ট্যগুলো কি কি হতে পারে?

ক্যানভাসে একটি আকৃতি (সাধারণত এটি আয়তক্ষেত্রাকার হয়ে থাকে)
বাটনটির কাজ বর্ণনা করে এমন একটি নাম অথবা চিহ্ন
বাটনটিতে ক্লিক করলে কোন একটি নির্ধারিত কাজ হয় (কিন্তু অন্য কোন স্থাকে ক্লিক করলে কাজটি আর হয় না)

আমরা #1 এবং #2 নং কাজ দুইটি খুব সহজেই করতে পারি:

fill(0, 234, 255);
rect(100, 100, 150, 50, 5);
fill(0, 0, 0);
textSize(19);
text("Useless button", 110, 133);

এবার #3 নং বৈশিষ্ট্যের কাজটি করার জন্য, আমাদের একটি mouseClicked ফাংশন সংজ্ঞায়িত করতে হবে। ফলশ্রুতিতে বাটনে ক্লিক করলে এই ফাংশনটি কল করা হবে। এছাড়াও mouseX এবং mouseY বাটনটির সীমারেখার মধ্যে আছে কিনা তা যাচাই করতে হবে। উদাহরণস্বরূপ নিচে দেওয়া বাটনটির দৈর্ঘ্য x=100 থেকে x=250 পর্যন্ত এবং উচ্চতা y=100 থেকে y=150 পর্যন্ত:

আমরা এই স্থানাঙ্কগুলি && (AND অপারেটর) ব্যবহার করে চারটি কন্ডিশনের মাধ্যমে যাচাই করতে পারি:

mouseClicked = function() {
    if (mouseX >= 100 && mouseX <= 250 &&
        mouseY >= 100 && mouseY <= 150) {
        println("Still pretty useless");    
    }
};

এটি কাজ করে কিনা যাচাই করার জন্য বাটনটিতে ক্লিক করা যাক:

নিঃসন্দেহে এটি কাজ করছে, কিন্তু একই সাথে এটি আমাকে দুশ্চিন্তায় ফেলে দিয়েছে। আমি চিন্তিত কারণ এই কোডটি সহজভাবে পুনরায় ব্যবহারযোগ্য নয়। বাটনটির অবস্থান বদলানোর জন্য কোডটি পরিবর্তন করতে হলে আমাদের কতটুকু কাজ করতে হবে? (উপরে চেষ্টা করে দেখতে পার!) দেখা যাচ্ছে যে কোডে ব্যবহৃত সংখ্যাগুলি "হার্ড কোডেড" রূপে আছে অর্থাৎ সরাসরিভাবে দেওয়া আছে -- যেমন mouseClicked ফাংশনের স্থানাঙ্কগুলি এবং এই কাজটি আরও সহজভাবে কীভাবে করা সম্ভব তার উপায় নিয়ে আমি এখন ভাবছি।

শুরুতেই অবস্থান এবং আকারের জন্য চলক তৈরি করা যাক, যেন এর মানগুলো একটি স্থান থেকেই পরিবর্তন করা সম্ভব হয় এবং একই সাথে বাটনটিও সচল থাকে। আমি btnX, btnY, btnWidth এবং btnHeight চলকগুলি প্রোগ্রামে যোগ করেছি। চলকগুলির মান পরিবর্তন করে বাটনটিতে ক্লিক করে দেখা যাক:

বেশ, এখন কোডটি আগের থেকে ভালো হয়েছে। কিন্তু আমি যদি আরেকটি বাটন যোগ করতে চাই তাহলে আমাদের আবার কতটুকু কাজ করতে হবে? আমাকে কি btn2X, btn2Y তৈরি করার জন্য সম্পূর্ণ কোডটিই কপি-পেস্ট করতে হবে? ব্যাপারটা একদম বিরক্তিকর। এজন্য সবচেয়ে সহজ উপায় হল একটি ফাংশন লেখা যার মধ্যে বাটন তৈরির সবগুলো বৈশিষ্ট্য থাকবে এবং প্যারামিটার ব্যবহার করার মাধ্যমে তৈরিকৃত বাটনের পার্থক্য নির্ধারণ করে দেওয়া যাবে। চলকগুলিকে প্যারামিটারে রূপান্তর করে, আমরা এভাবে লিখতে পারি:

var drawButton = function(btnX, btnY, btnWidth, btnHeight) {
    fill(0, 234, 255);
    rect(btnX, btnY, btnWidth, btnHeight, 5);
    fill(0, 0, 0);
    textSize(19);
    textAlign(LEFT, TOP);
    text("Useless button", btnX+10, btnY+btnHeight/4);
};

তারপর আমরা এভাবে কল করব:

drawButton(100, 100, 150, 50);

কিন্তু আমাদের mouseClicked এর কোডটি কোথায়? এটি থাকলে কি ধরনের সমস্যা হতে পারে?

mouseClicked = function() {
    if (mouseX >= btnX && mouseX <= (btnX+btnWidth) &&
        mouseY >= btnY && mouseY <= (btnY+btnHeight)) {
        println("Still pretty useless");    
    }
};

এই সম্পূর্ণ কোড যদি আমরা একসাথে লিখতাম তাহলে একটি ত্রুটি আমরা পেতাম যাতে লেখা থাকত, "btnX সংজ্ঞায়িত নয়" ! আমরা btnX কে একটি ফাংশনের প্যারামিটারে পরিবর্তন করেছি, যার মানে এটি আর সার্বজনীন চলক নেই। এটি drawButton ফাংশনটি পুনরায় ব্যবহারের জন্য চমৎকার, কিন্তু এখন mouseClicked ফাংশনটির স্থানাঙ্কগুলি যাচাই করার কোন উপায় নেই।

এজন্য আমাদের drawButton ফাংশনটিতে তথ্য পাঠানোর এমন একটি সহজ উপায় বের করতে হবে যেন mouseClicked ফাংশনও তথ্যটি পায়। আমি কয়েকটি বিকল্প পদ্ধতি চিন্তা করতে পারছি:

অবস্থান এবং আকারের জন্য সার্বজনীন চলককে পুনরায় তৈরি করা (btnX, btnY, btnWidth, btnHeight)
একটি সার্বজনীন অ্যারে তৈরি করা যা সকল প্যারামিটার সংরক্ষণ করে রাখে (var btn1 = [...];)
একটি সার্বজনীন অবজেক্ট তৈরি করা যা সকল প্যারামিটার সংরক্ষণ করে রাখে (var btn1 = {..})
অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং এর নীতি অনুযায়ী বোতাম সংজ্ঞায়িত করা এবং বৈশিষ্ট্যগুলি সংরক্ষণ করা (var btn1 = new Button(...))

Which to choose? Well, I don't like the first one because we'll have to add so many global variables, and I have an allergy to global variables. I don't love the second technique because it's hard to read code that grabs data based on array indices. I like the third technique because it introduces only one global variable, and will produce more readable code. I also like the fourth technique, using object-oriented principles to create generic Button object types, but let's save that for later.

আমরা আমাদের সার্বজনীন btn1 অবজেক্ট এভাবে তৈরি করতে পারি:

var btn1 = {
    x: 100,
    y: 100,
    width: 150,
    height: 50
};

এবং drawButton ফাংশনটিকে এমনভাবে পরিবর্তন করি যেন এটি একটি অবজেক্ট গ্রহণ করে সেটির বৈশিষ্ট্যগুলো নিতে পারে:

var drawButton = function(btn) {
    fill(0, 234, 255);
    rect(btn.x, btn.y, btn.width, btn.height, 5);
    fill(0, 0, 0);
    textSize(19);
    textAlign(LEFT, TOP);
    text("Useless button", btn.x+10, btn.y+btn.height/4);
};

mouseClicked ফাংশনটি সার্বজনীন চলকের বৈশিষ্ট্যগুলো যাচাই করবে:

mouseClicked = function() {
    if (mouseX >= btn1.x && mouseX <= (btn1.x+btn1.width) &&
        mouseY >= btn1.y && mouseY <= (btn1.y+btn1.height))     {
        println("Still pretty useless");    
    }
};

নিচে চেষ্টা করে দেখা যাক! আগের মতই, সবকিছু সচল আছে কিনা দেখার জন্য বাটনের বিভিন্ন প্যারামিটারের মান পরিবর্তন করি:

এই কাজটি করার উদ্দেশ্য হল সহজে বাটন যোগ করা, পুনরায় ব্যবহার যোগ্যতার চূড়ান্ত পরীক্ষা। আমরা কি কাজটি করতে পারব?

আমরা btn2 নামের একটি নতুন সার্বজনীন চলক নিয়ে শুরু করব, যেটার প্রথম বাটন সাপেক্ষে y এর দিকে অফসেট আছে:

var btn2 = {
    x: 100,
    y: 200,
    width: 150,
    height: 50
};

তারপর আমরা বাটনটি আঁকবোঃ

drawButton(btn2);

আমরা সফলভাবে ক্যানভাসে দুইটি বাটন দেখতে পাব, কিন্তু শুধুমাত্র প্রথম বাটনটিতে ক্লিক করলে কাজ করবে। দ্বিতীয় বাটনটিকে কাজ করানোর জন্য লজিকটি পুনরায় লিখতে হবে এবং নিম্নরূপে btn1 এর বদলে btn2 ব্যবহার করতে হবে:

mouseClicked = function() {
    if (mouseX >= btn1.x && mouseX <= (btn1.x+btn1.width) &&
        mouseY >= btn1.y && mouseY <= (btn1.y+btn1.height))     {
        println("Still pretty useless");    
    }

    if (mouseX >= btn2.x && mouseX <= (btn2.x+btn2.width) &&
        mouseY >= btn2.y && mouseY <= (btn2.y+btn2.height))     {
        println("2nd one still quite useless!");    
    }
};

কিন্তু বার বার একই কোড দেখে কি গোলমেলে লাগছে? এখন, isMouseInside নামে একটি ফাংশন তৈরি করি যা সকল বাটনকে যাচাই করবে এবং যদি মাউস বাটনের মধ্যে থাকে তাহলে true রিটার্ন করবে:

var isMouseInside = function(btn) {
    return (mouseX >= btn.x &&
            mouseX <= (btn.x+btn.width) &&
            mouseY >= btn.y && 
            mouseY <= (btn.y+btn.height));
};

এখন আমরা এই ফাংশনটিকে mouseClicked ফাংশনের মধ্যে ব্যবহার করতে পারব। ফলশ্রুতিতে একই কোডের পুনরাবৃত্তি অনেকটা হ্রাস পাবে:

mouseClicked = function() {
    if (isMouseInside(btn1))     {
        println("Still pretty useless");    
    } else if (isMouseInside(btn2))     {
        println("2nd one still quite useless!");    
    }
};

এইতো আমরা পেয়ে গেছি! আমরা একাধিক বাটন আঁকার জন্য ফাংশন তৈরি করেছি এবং নতুন বাটন যোগ করার পদ্ধতি অনেক সহজ করেছি। নিচে চেষ্টা দেখা যাক:

আমরা আরও অনেক কিছুই করতে পারি -- আমরা যদি অ্যারের মধ্যে সকল বাটনকে রাখতে পারি, তাহলে আমরা বাটনের নাম এবং রঙ পরিবর্তন করতে পারব -- কিন্তু আশা করা যায় যে, ফাংশন ব্যবহার করে সহজ একটি বাটন তৈরির ব্যাপারে পরিস্কার ধারণা পাওয়া গেছে। পরবর্তীতে, আমরা দেখব কীভাবে অবজেক্ট-অরিয়েন্টেড নীতি ব্যবহার করে বাটন তৈরি করা যায়।

আলোচনায় অংশ নিতে চাও?

প্রবেশ কর

সাজানো আছেঃ

কোন আলাপচারিতা নেই।

ইংরেজি জানো? খান একাডেমির ইংরেজি সাইটে আরো আলোচনা দেখতে এখানে ক্লিক কর।