কোড লিখা ভালো লাগলেও কখনও কখনও এটি হতাশাজনক হয়ে ওঠে। কোড রান ন होने বা সঠিক কাজ না করার কারণ বের করা কঠিন হয়। সেটিই জাভাস্ক্রিপ্ট কনসোল কাজে লাগে। কনসোল আপনাকে কোডের ভিতরে কী হচ্ছে তা ট্র্যাক করতে দেয়, যা ডিবাগিংয়ে খুব সাহায্য করে।
এই গাইডে জাভাস্ক্রিপ্ট কনসোল কীভাবে ব্যবহার করতে হয় এবং একটি উদাহরণ অ্যাপ্লিকেশন দিয়ে দ্রুত শিখতে পারবেন।
জাভাস্ক্রিপ্ট কনসোল
ডেভেলপার হিসেবে আপনি কনসোলে অনেক সময় কাটাবেন, তাই এর সাথে পরিচিত হওয়া জরুরি। কনসোল হলো যেখানে আপনার অ্যাপ্লিকেশন রান হওয়ার সময় মেসেজ ডিসপ্লে করতে পারেন এবং ওয়েব পেজের কন্টেন্ট ম্যানিপুলেট করতে পারেন।
আপনি কোডে কনসোল লগ লিখলে সেটি নির্দিষ্ট সময়ে見える। কনসোল থেকে ভেরিয়েবল, ভ্যালু মডিফাই করা এবং ইনস্পেক্ট করা যায়।
কনসোল খোলার পদ্ধতি: Chrome-এ Windows-এ Ctrl + Shift + I, Mac-এ Cmd + Alt + I। Firefox-এ Command + Option + K।
সকল আধুনিক ব্রাউজারের নিজস্ব ডেভেলপার টুলস রয়েছে। এই টিউটোরিয়ালে শুধু কনসোলে ফোকাস করব।
কনসোল দিয়ে শুরু করা
ওয়েব পেজ খুলা ছাড়াই কনসোলে মেসেজ দেখানো যায়। ব্রাউজার কনসোল খুলে জাভাস্ক্রিপ্ট স্টেটমেন্ট লিখলেই চলে।
কনসোলে তিনটি প্রধান মেথড রয়েছে:
console.log(): কনসোলে মেসেজ দেখায়।console.warn(): সতর্কতা (ওরেঞ্জ রঙে) দেখায়।console.error(): এরর (লাল রঙে) দেখায়।
সতর্কতা: কনসোলে যেকোনো কোড পেস্ট করার আগে বুঝে নিন সেটি কী করে। অনেক সাইট কনসোল ব্যবহার না করার সতর্কতা দেয় কারণ স্ক্যামাররা কনসোল দিয়ে সেনসিটিভ তথ্য চুরি করতে পারে।
চলুন শুরু করি। মেসেজ দেখানোর কোড:
console.log("Career Karma is logging stuff to the console!");
এক্সিকিউট করলে মেসেজটি কনসোলে見える।
এরর ও ওয়ার্নিংও দেখানো যায়:
console.warn("Hey, something is going on!"); console.error("Hey, your code has stopped working!");
ওয়ার্নিং ওরেঞ্জ রঙে, এরর লাল রঙে দেখাবে।
অ্যাপ্লিকেশনে কনসোল ব্যবহার
কুকি ক্লিকার মডেলে একটি অ্যাপ বানাব যা একটি চা কাপের ছবিতে কতবার ক্লিক হয়েছে তা কাউন্ট করবে এবং প্রতিটি ক্লিক কনসোল লগ করবে।
ফ্রন্ট-এন্ড ডেভেলপমেন্ট
index.html ফাইল তৈরি করুন:
<!DOCTYPE html> <html> <head> <title>Tea Clicker</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="container"> <h2>Tea Clicker</h2> <p>Click the tea cup as many times as you can!</p> <img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" /> <p>You have clicked the tea cup <span>0</span> times.</p> </div> <script src="./scripts.js"></script> </body> </html>
CSS (styles.css):
.container { background-color: lightblue; margin: auto; width: 50%; padding: 40px; text-align: center; } span { color: yellow; } img { border-radius: 50px; }
এখন জাভাস্ক্রিপ্ট (scripts.js)। DOM এলিমেন্ট সিলেক্ট করুন:
var clickCounter = document.querySelector("span"); var teaCup = document.querySelector("img");
ক্লিক কাউন্টার ভেরিয়েবল:
var clicks = 0;
ক্লিক ফাংশন লিখুন:
function createClick() { console.log("The button has been clicked") clicks += 1; clickCounter.innerText = clicks; }
প্রথম লাইন কনসোলে মেসেজ প্রিন্ট করবে। তারপর কাউন্টার বাড়াবে এবং innerText দিয়ে স্ক্রিন আপডেট করবে।
ওয়েব পেজে ক্লিক করলে কাউন্টার বাড়বে এবং কনসোলে মেসেজ見える। বড় অ্যাপ্লিকেশনে লগিং ব্যাপকভাবে ব্যবহৃত হয়, যদিও প্রোডাকশনে লগ কম রাখা ভালো।
উপসংহার
কনসোল একটি টুল যা আপনার কোড কীভাবে কাজ করছে তা বুঝতে সাহায্য করে। ডিবাগিং মেসেজ, ওয়ার্নিং, এরর ট্র্যাক করতে এটি ব্যবহার করুন। ডেভেলপমেন্ট ফেজে লগিং রাখুন, প্রোডাকশনে অপ্রয়োজনীয় লগ রেখে দেবেন না।
