আজকে আমরা এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্ট ব্যবহার করে একটি ছোট প্রজেক্ট তৈরি করবো। এই প্রজেক্টটি আমরা ধাপে ধাপে বেস্ট প্র্যাক্টিস অনুসরণ করে তৈরি করবো। এজন্য আমরা সোর্স কোড এডিটর ও বেশ কিছু এক্সটারনাল জাভাস্ক্রিপ্ট ফাইল ব্যবহার করবো। এটা অনলাইন আই ডি ই যেমন, JsBin.com এবং CodePen.io ব্যবহার করে করা যাবে অথবা কম্পিউটারে ছোট একটি ফোল্ডার তৈরি করেও করা যাবে। ফোল্ডার ও ফাইল তৈরির ঝামেলায় না যেতে চাইলে JsBin.com এবং CodePen.io একটি ভালো সমাধান। এগুলো ব্যবহার করা বেশ সহজ, তবে যারা জানো না, তাঁরা ইউটিউবে ব্যবহারবিধি দেখে নিতে পারো। কম্পিটারে ফাইল তৈরি করলে ফাইলের স্ট্রাকচার হবে নিচের মতোঃ
মূল ফোল্ডার
=> এইচটিএমএল ফাইল
=> সিএসএস ফাইল
=> জাভাস্ক্রিপ্ট ফাইল
অর্থাৎ, একটি ফোল্ডারের মধ্যে এই তিন ফাইল তৈরি করে একটি অপরটির সঙ্গে যংযুক্ত করে দিতে হবে।
আমরা যা তৈরি করবোঃ
আমরা একটি ছোট ইন্টারএক্টিভ এইচটিএমএল ম্যাথ ফাংশন প্লটার পেজ তৈরি করবো, যাতে কিছু গণিত ফাংশনের নাম অনুযায়ী ইনপুট ফিল্ড ব্যবহার করা হবে, যেমন x এবং y এর মান, বক্র রেখার রঙ ইত্যাদি।
এই ম্যাথ ফাংশন প্লটারটি তৈরি করতে আমাদের JsBin.com, CodePen.io অথবা নরমাল একটি সোর্স কোড এডিটর থাকলেই হবে। চলুন তাহলে দেরী না করে শুরু করি। কোডপেনে গিয়ে একটি নতুন পেন তৈরি করুন। এবং এইচটিএমএলের জন্য নির্ধারিত স্থানে নিন্মোক্ত কোডটি কপি করে পেস্ট করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Plotting functions in JavaScript using the
function plot library</title>
<meta charset="utf-8"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
</head>
<body onload="plot();">
<h2>Interactive function plotter</h2>
<section id="plot">
<div id="myFunction"></div>
</section>
</body>
</html>এবার জাভাস্ক্রিপ্টের জন্য নির্ধারিত স্থানে নিচের কোড প্রবেশ করাওঃ
var parameters = {
target: '#myFunction',
data: [{
fn: 'sin(x)',
color: 'red'
}],
grid: true,
yAxis: {domain: [-1, 1]},
xAxis: {domain: [0, 2*Math.PI]}
};
function plot() {
functionPlot(parameters);
}এবার নিচের মতো একটি ফলাফল পাবে।
এটা কিভাবে আসলো যখন আমরা আমাদের এইচটিএমএলে এমন কোনও তথ্য দেই নি?
আসলে, আমরা এখানে দুটি জাভাস্ক্রিপ্ট লাইব্রেরী ব্যবহার করেছি। এর একটি হচ্ছে d3js.org/d3.v3.min.js ও অন্যটি হচ্ছে mauriciopoppe.github.io/function-plot/js/function-plot.js। এরপর আমরা ফাংশন প্লট সাজাতে জাভাস্ক্রিপ্টের লাইব্রেরী থেকে ছোট একটি ভেরিয়েবল ও কিছু তথ্য ব্যবহার করেছি।
যেমন,
var parameters দিয়ে parameters নামক একটি ভেরিয়েবল তৈরি করেছি যার মূল লক্ষ্য হচ্ছে এইচটিএমএলের ডিভিশন আইডি #myFunction এবং এতে জাভাস্ক্রিপ্ট লাইব্রেরী থেকে আরো কিছু তথ্য বা মান সংযোজন করা হয়েছে। তাই, parameters মূলত একটি অ্যারে ভেরিয়েবল। বলে রাখা ভালো, জাভাস্ক্রিপ্ট ভেরিয়েবল সাধারণত তিন ধরনের হয়ে থাকে।
স্ট্রিং ভেরিয়েবল = একক তথ্যের ভেরিয়েবল;
নিউমেরিক ভেরিয়েবল = সংখ্যার ভেরিয়েবল;
অ্যারে ভেরিয়েবল = বহু তথ্য বা এক গুচ্ছ তথ্যের ভেরিয়েবল;
উপরের ভেরিয়েবলটি অ্যারে ভেরিয়েবল
এখানে মূলত অ্যারে ভেরিয়েবল ব্যবহার করা হয়েছে, যার মানগুলো যথাক্রমে, target, data, grid, yAxis ও xAxis। এগুলোর মাধ্যমেই মূলত ম্যাথ প্লটারের বক্র রেখাটি নিয়ন্ত্রন করা হবে। সবশেষে, আমরা plot() নামে একটি ফাংশন তৈরি করেছি functionPlot মেথডের মাধ্যমে আগের তৈরি করা parameters গ্লোবাল ভেরিয়েবলটি এতে পাস করা হয়েছে।
কিভাবে পেইজে ফাংশন লোড হবে
এইচটিএমেএলের দিকে লক্ষ্য করলে প্রথমেই body onload=”plot() দেখতে পাবে। এর মাধ্যমে আসলে ব্রাউজার এইচটিএমএল ডকুমেন্টের body এলিমেন্টে আসার সাথে সাথেই plot() ফাংশনটি লোড হবে। এবং ডিভিশন আইডি myFunction এর নির্ধারিত স্থানে একজন ব্যবহারকারী উপরের চিত্রের মতো ম্যাথ ফাংশন প্লটারটি ব্রাউজারে দেখতে পাবে।
আজ এ পর্যন্তই। পরবর্তী ধাপে আমরা গণিত ফাংশনের নাম অনুযায়ী এই এইচটিএমএল ডকুমেন্টে ইনপুট ফিল্ড যুক্ত করবো, যেমন, ফাংশন, x এবং y এর মান, বক্র রেখার রঙ ইত্যাদি। এর ফলে পুরো ম্যাথ প্লটারটি ইন্টারএক্টিভ বা পরিবর্তনযোগ্য হয়ে উঠবে। সে পর্যন্ত সবাই ভালো ও সুস্থ থেকো।
তথ্যসুত্রঃ ইডিএক্স ও জাভাস্ক্রিপ্ট সম্পর্কিত ইবুক।
