জাভাস্ক্রিপ্ট কনসোল:নতুনদের জন্য একটি গাইড

কোড লেখা, বিনোদনের সময়, বেশ ক্লান্তিকর হয়ে উঠতে পারে।

এমন দিন আছে যখন আপনি কোড লিখতে শুরু করেন, বুঝতে পারেন কিছু চলছে না এবং খুব হতাশ হন। আরও বিরক্তিকর হল যখন আপনার কোড চলে, কিন্তু কেন এটি সঠিকভাবে কাজ করছে না তা আপনি বুঝতে পারবেন না; যখন আপনার কোডে কিছু থাকে তখন আপনাকে ঠিক করতে হবে।

সেখানেই জাভাস্ক্রিপ্ট কনসোল কার্যকর হতে পারে। কনসোল আপনাকে আপনার কোডে কী ঘটছে তা ট্র্যাক রাখতে দেয়। এটি আপনার কোডে কী ভুল তা বের করা সহজ করে তোলে।

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

জাভাস্ক্রিপ্ট কনসোল

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

কনসোল হল এমন একটি জায়গা যেখানে আপনি আপনার অ্যাপ্লিকেশন চলাকালীন বার্তাগুলি প্রদর্শন করতে পারেন এবং যেখানে আপনি একটি ওয়েব পৃষ্ঠার বিষয়বস্তু পরিচালনা করতে পারেন৷

আপনি কনসোলে বার্তা লগ করার জন্য আপনার কোড বলতে পারেন এবং আপনি যখন তাদের নির্দেশ দেবেন তখন সেগুলি উপস্থিত হবে৷ আপনি ভেরিয়েবল, মান পরিবর্তন করতে এবং একটি ভেরিয়েবলে সংরক্ষিত মানগুলি পরিদর্শন করতে কনসোল ব্যবহার করতে পারেন।

আপনার কনসোল প্রদর্শন করতে, আপনাকে বিকাশকারী সরঞ্জামগুলি খুলতে হবে। ক্রোমে, আপনি উইন্ডোজে Ctrl + Shift + I বা Mac এ Cmd + Alt + I ব্যবহার করে এটি করতে পারেন। ফায়ারফক্সে, আপনি Command + Option + K ব্যবহার করে ডেভেলপার টুল খুলতে পারেন।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

যখন আপনি করবেন, এই মত একটি উইন্ডো খুলবে:

জাভাস্ক্রিপ্ট কনসোল:নতুনদের জন্য একটি গাইড

প্রতিটি আধুনিক ব্রাউজারের নিজস্ব ডেভেলপার টুল স্যুট রয়েছে এবং সমস্ত ব্রাউজার জুড়ে অনেকগুলি সাধারণ বৈশিষ্ট্য রয়েছে৷ এই টিউটোরিয়ালের জন্য, আমরা শুধু কনসোলে ফোকাস করতে যাচ্ছি।

কনসোল দিয়ে শুরু করা

আমরা কনসোলে একটি বার্তা প্রদর্শন করে শুরু করতে যাচ্ছি। আমরা এমনকি একটি ওয়েব পৃষ্ঠা খোলা ছাড়া এটি করতে পারেন. আপনাকে যা করতে হবে তা হল আপনার ব্রাউজার কনসোল খুলুন এবং আপনি যে জাভাস্ক্রিপ্ট স্টেটমেন্টগুলি চালাতে চান তা লিখুন৷

কনসোলে আপনি তিনটি প্রধান পদ্ধতি ব্যবহার করবেন:

console.log():কনসোলে একটি বার্তা প্রদর্শন করে।
console.warn():কনসোলে একটি সতর্কতা প্রদর্শন করে।
console.error():কনসোলে একটি ত্রুটি প্রদর্শন করে।

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

যে বলে, চলুন শুরু করা যাক! কনসোলে একটি বার্তা প্রদর্শন করতে, আমরা এই কোডটি ব্যবহার করতে পারি:

console.log("Career Karma is logging stuff to the console!");

আপনি এই কমান্ডটি কার্যকর করার সাথে সাথে নিম্নলিখিতগুলি ফিরে আসবে:

আপনি কনসোলে ত্রুটি এবং সতর্কতা প্রদর্শন করতে পারেন। ত্রুটি এবং সতর্কতা এবং একটি ঐতিহ্যগত log() এর মধ্যে পার্থক্য বিবৃতিটি হল যে ত্রুটি এবং সতর্কতাগুলি যথাক্রমে কমলা এবং লাল রঙে প্রদর্শিত হয়:

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>

এই কোডটি আমাদের ওয়েব পৃষ্ঠায় চারটি আইটেম প্রদর্শন করে:একটি শিরোনাম, গেমের একটি বিবরণ, এক কাপ চায়ের একটি চিত্র এবং একটি বার্তা ব্যবহারকারীকে জানায় যে তারা কতবার চায়ের কাপে ক্লিক করেছে৷

এটিকে আকর্ষণীয় দেখাতে আমাদের কোডে কিছু স্টাইল যোগ করা যাক। “styles.css” নামে একটি ফাইল তৈরি করুন এবং এই কোডে পেস্ট করুন:

.container {
    background-color: lightblue;
    margin: auto;
    width: 50%;
    padding: 40px;
    text-align: center;
}

span {
    color: yellow;
}

img {
    border-radius: 50px;
}

এই শৈলীগুলি আমাদের চা ক্লিকার গেমের জন্য একটি বাক্স তৈরি করে, ক্লিক কাউন্টারের রঙ হলুদে সেট করে এবং আমাদের চিত্রের জন্য বৃত্তাকার কোণ তৈরি করে। আমাদের ওয়েবপৃষ্ঠাটি এখন কেমন দেখাচ্ছে তা এখানে:

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

জাভাস্ক্রিপ্ট ব্যবহার করে কার্যকারিতা যোগ করা

ব্যবহারকারী চায়ের কাপে ক্লিক করলে, কাউন্টারটি এক দ্বারা বৃদ্ধি পাবে। আমরা আমাদের কাউন্টার বাড়াতে পারার আগে, আমরা যে DOM উপাদানগুলির সাথে কাজ করতে যাচ্ছি তা নির্বাচন করতে হবে:চিত্র এবং কাউন্টার৷ 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;
}

প্রথম লাইনটি কনসোলে "বোতামটি ক্লিক করা হয়েছে" কনসোল বার্তাটি প্রিন্ট করবে। এর পরে, আমরা আমাদের "ক্লিক" কাউন্টারে 1 যোগ করি। তারপর আমরা innerText পদ্ধতি ব্যবহার করে আপডেট করা ক্লিকের সংখ্যা প্রতিফলিত করতে আমাদের ট্যাগে পাঠ্যের বিষয়বস্তু পরিবর্তন করি।

আসুন আমাদের ওয়েব পৃষ্ঠাটি দেখুন এবং চায়ের কাপের ছবিতে ক্লিক করুন:

যেমন দেখা যায়, যখন আমরা চায়ের কাপে ক্লিক করি তখন আমাদের কাউন্টার এক এক করে বৃদ্ধি পায়। উপরন্তু, আমরা আমাদের কোডে নির্দিষ্ট করা বার্তাটি কনসোলে প্রিন্ট করা হয়। ব্যবহারকারী যখন চায়ের কাপে ক্লিক করেন তখন এটি আমাদের বুঝতে সাহায্য করে।

যদিও এটি console.log()-এর একটি অত্যন্ত মৌলিক বাস্তবায়ন বিবৃতি, একটি বড় অ্যাপ্লিকেশনে আপনি দেখতে পারেন যে লগিং ব্যাপকভাবে ব্যবহৃত হয়। বেশিরভাগ ক্ষেত্রে, লগগুলি শুধুমাত্র অ্যাপ্লিকেশনগুলির বিকাশ সংস্করণে রাখা হয়৷ এর কারণ হল ব্যবহারকারীদের পর্দার আড়ালে কী ঘটছে তা দেখার দরকার নেই। যে বলে, লগিং এখনও বিকাশকারীদের জন্য একটি অবিশ্বাস্যভাবে মূল্যবান হাতিয়ার৷

৷

উপসংহার

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

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