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


কম্পোনেন্ট হচ্ছে রিঅ্যাক্ট এর বিউল্ডিং-ব্লক। রিঅ্যাক্ট এর একটা অ্যাপ্লিকেশনে সাধারণত অনেক কম্পোনেন্ট দেখতে পাবো আমরা। কম্পোনেন্ট আসলে তেমন কিছুই না বরং সোজা বাংলায় আমরা এটাকে একটা ম্যাশিনের পার্টস এর সাথে তুলনা করতে পারি। একটা ম্যাশিনে যেমন ছোটো ছোটো অনেকগুলো পার্টস মিলিত হয়ে পুরো ম্যাশিনটা গড়ে তোলে, তেমনি একটা রিঅ্যাক্ট এর…


ধরুন আমি ফেসবুক চালাচ্ছি, এখন একটা পোস্ট দেখে আমার ভালো লাগলো। এখন আমি এটাতে রিঅ্যাকশন দিতে চাচ্ছি। রিঅ্যাকশন বাটনে ক্লিক করার পর পুরো ফেসবুক আবার রিলোড হলো। কারণ আমি যে পোস্টে রিঅ্যাকশন দিয়েছি সে ডাটাকে ফেসবুকের সার্ভারে পাঠাতে হবে, আর তাই ব্রাউজার সে কাজ করতে গিয়ে পুরোপুরি রিলোড হলো। এখন…


ইভেন্ট হচ্ছে সোজা কথায় কোনো ঘটনা। আমি আমার একটা HTML ডকুমেন্ট এর কোথাও ক্লিক করলাম, এটা একটা ইভেন্ট। অথবা আমি একটা ইলিমেন্ট এর উপর মাউস পয়েন্টার নিলাম, অথবা আমি কী-বোর্ডের কোনো কী-তে চাপলাম, এগুলো সবই ইভেন্টের অন্তর্ভুক্ত। এমনিতে একটা পেজ লোড করা, পেজকে রিসাইজ করা এগুলোও ইভেন্টের মধ্যে পড়ে। এরকম…


আগের পর্বে আমরা দেখেছি কিভাবে ডমের ইলিমেন্ট বিভিন্নভাবে সিলেক্ট করতে হবে। এখন সিলেক্ট করার পর এখন আমাদের সেগুলো নিয়ে কাজ করতে পারবো। এই পর্বে আমি তাই ইলিমেন্ট বানানো থেকে শুরু করে, এগুলোকে কিভাবে বিভিন্নভাবে মডিফাই করবেন, সেই সাথে ইলিমেন্টগুলো নিয়ে ডমে কিভাবে বিভিন্ন জায়গায় প্লেস করাবেন, এসব নিয়ে আলোচনা করবো।


ডমে কোনো কাজ করতে হলে প্রথমেই আপনাকে আপনার ডমে থাকা ইলিমেন্টগুলোকে সিলেক্ট করতে হবে। তারপরে সিলেক্ট করা ইলিমেন্ট এর উপর বিভিন্নরকমের অপারেশন চালাতে পারবেন। আর তাই প্রথমেই আমরা দেখে নিবো কিভাবে আমরা বিভিন্নভাবে ডমের ইলিমেন্টগুলো সিলেক্ট করতে পারি। আর সেজন্যে আমাদের প্র্যাক্টিস করার জন্যে কিছু ইলিমেন্টসহ একটা HTML ডকুমেন্ট লাগবে।…


সমস্যাঃ আমরা একটা ফাংশনে একটা স্ট্রিং আর্গুমেন্ট হিসেবে দিবো। সেটা আমাদেরকে স্ট্রিং টা সম্পূর্ণ উল্টো করে রিটার্ণ করবে। যেমনঃ

stringReverese('Hello World!');
// Should Return: !dlroW olleH

সমস্যা বিশ্লেষণ ও সম্ভাব্য সমাধানের রাস্তাঃ আমরা এখানে অ্যারে হলে অনেক সহজেই উল্টিয়ে ফেলতে পারতাম। কারণ অ্যারের রিভার্স reverse() মেথড আছে। এখন আমরা চাইলে…


ডম(DOM) বা অন্যকথায় ডকুমেন্ট অবজেক্ট মডেল(Document Object Model) হচ্ছে XML বা HTML ডকুমেন্ট এর জন্যে একটা প্রোগ্রামিং ইন্টারফেস। এখান এটা কি? …


আমরা জাভাস্ক্রিপ্ট এ প্রমিসের কথা জানি, প্রমিস হ্যান্ডেল করতে এবং প্রমিস থেকে ডাটা উদ্ধার করতে কলব্যাক কিভাবে ব্যবহার করতে হয় সেটা নিয়েও আমরা জানি। আমরা দেখেছি কিভাবে একটা প্রমিস হ্যান্ডেল করার পর এটার ভিতরে কলব্যাক ফাংশন কল করতে হয়। আবার সেই কলব্যাক ফাংশনের ভিতরে প্রমিস থেকে আসা ডাটাগুলো অ্যাক্সেস করতে…


জাভাস্ক্রিপ্ট এর অ্যাসিনক্রোনাস আচরণ সম্পর্কে আমরা জানি। রিমোট কোনো সার্ভার থেকে বা একটু সময় লাগে এমন কোনো অপারেশন শেষ করার জন্যে জাভাস্ক্রিপ্ট অপেক্ষা না করে বরং পরের অপারেশনে চলে যায়। এধরনের অপারেশন হচ্ছে অ্যাসিনক্রোনাস অপারেশন। এখন এই অপারেশন ফেলে অন্য অপারেশনে চলে গেলেও জাভাস্ক্রিপ্ট ঠিকই এটাকেও ট্র্যাক করে রাখে। আর…

Zonayed Ahmed

Front End Engineer — Passionate Programmer — ❤ JavaScript — Skill is My Weapon, Perfection is My Habit — 🌍https://www.zonayed.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store