1.2. Environment সেটআপ
জাভাস্ক্রিপ্ট কোড লেখার জন্য আমাদের একটি কোড এডিটর প্রয়োজন। ভিজ্যুয়াল স্টুডিও কোড এডিটর(ভিএস কোড), এটম এডিটর, সাব্লাইম টেক্সট ইত্যাদি সহ বিভিন্ন কোড এডিটর রয়েছে। এর মধ্যে, আমার প্রিয় ভিজ্যুয়াল স্টুডিও কোড এডিটর (ভিএস কোড) যা আমরা code.visualstudio.com থেকে ডাউনলোড করতে পারি। এটি খুব সিম্পল, ক্রস প্ল্যাটফর্ম এবং খুব শক্তিশালী এডিটর। সুতরাং, যদি আপনার মেশিনে VS কোড না থাকে তাহলে আর দেরি না করে এটি ডাউনলোড করুন, অন্য আরো একটি জিনিস আমি চাই আপনি ইনস্টল করুন তা হল নোড। যা আমরা node.js.org নোড ফর্ম ডাউনলোড করতে পারি।
আসলে, আমাদের জাভাস্ক্রিপ্ট কোড এক্সেকিউট করার জন্য নোডের দরকার নেই কারণ আমরা আমাদের JS কোড ব্রাউজারের ভিতরে অথবা নোডের ভিতর এক্সেকিউট করতে পারি। কিন্তু আপনার মেশিনে নোড থাকা ভালো কারণ এটি থার্ড পার্টি লাইব্রেরি ইনস্টল করতে ব্যবহৃত হয় । তাহলে চলুন আর কথা না বাড়িয়ে VS কোড এবং পাশাপাশি নোড ডাউনলোড করে ইনস্টল করি।
এখন আমি চাই আপনি আপনার কম্পিউটারে js-basics নামে একটি নতুন ফোল্ডার তৈরি করুন, নামটি js-basics ই হতে হবে এমন কোনো বাদ্ধবাধকতা নেই । আমরা আমাদের সমস্ত জাভাস্ক্রিপ্ট কোড এই ফোল্ডারটিকে লিখতে চাই। এখন, এই ফোল্ডারটিকে VS কোডে ড্র্যাগ এন্ড ড্রপ করুন । দেখবেন ফোল্ডারটি VS কোডে লোড হয়ে গেছে। এখানে index.html নামে একটি ফাইল ফাইল যোগ করুন। এই ফাইলে একটি বিস্ময়বোধক চিহ্ন টাইপ করুন আর তারপর ট্যাব। বুম!!!!!!
এটি কিছু বেসিক এইচটিএমএল বয়লারপ্লেট তৈরি করেছে এবং আমরা এটিকে আমাদের জাভাস্ক্রিপ্ট কোডের হোস্ট ( বয়লারপ্লেট ) হিসাবে ব্যবহার করতে যাচ্ছি। এখন পরিবর্তনগুলি সেভ করুন এবং VS কোডের বাম পাশে এক্সটেনশন ট্যাবটি খুলুন। এখানে সার্চ বক্সে লাইভ সার্ভার অনুসন্ধান করুন।
লাইভ সার্ভার একটি খুব হালকা ওয়েব সার্ভার যা আমাদের ওয়েব অ্যাপ্লিকেশনটি সার্ভ করতে ব্যবহৃত হবে । সুতরাং, এটি ইনস্টল করুন এবং VS কোডটি পুনরায় চালু করতে হবে।
এরপর VS কোডের বাম পাশে এক্সপ্লোরার ট্যাবে যান এবং index.html ফাইলে রাইট ক্লিক করুন এবং Open with Live Server এ ক্লিক করুন ৷ এতে ক্রোম বা আপনার ডিফল্ট ব্রাউজারে HTML ফাইলটি ওপেন হবে । এখানে আমরা একটি খালি ওয়েব পেজ দেখতে পাবো, সবকিছু সঠিকভাবে কাজ করছে কিনা তা নিশ্চিত করতে, আসুন VS কোডে ফিরে যাই, এখানে বডি সেক্শনে h1 ট্যাগ যোগ করুন এবং ট্যাব টিপুন এবং Hello World টাইপ করুন। এখন পরিবর্তনগুলি সেভ করুন এবং ব্রাউজারে ফিরে যান এবং আপনি দেখতে পাবেন পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়েছে এবং আমরা ওয়েবপেজের হেডিং-এ হ্যালো ওয়ার্ল্ড দেখতে পাচ্ছি।
