সব প্রোগ্রামিং ভাষার মত জাভাস্ক্রিপ্ট এর কোড লিখে রান করতে হয়। তবে প্রশ্ন হলো কিভাবে জাভাস্ক্রিপ্ট এর কোড লিখতে হবে এবং কোথায় লিখতে হবে। এই ব্যাপারটি এই লেখায় তুলে ধরব। জাভাস্ক্রিপ্ট কোড অনেকভাবেই বিভিন্ন উপায়ে লেখা যায়। সবচেয়ে মজার ব্যাপার হলো জাভাস্ক্রিপ্ট লেখার জন্য গুগল ক্রোম, সাফারি কিংবা মজিলার মত ব্রাউজার যে কোন একটি ব্রাউজার আপনার পিসিতে একটা ব্রাউজার থাকলেই হবে। তবে প্রফেশনাল কাজে বেশিভাগ ডেভেলপাররা বিভিন্ন কোড এডিটর সফটওয়্যার ব্যবহার করেন। চলুন দেখি কি কি উপারে জাভাস্ক্রিপ্ট কোড রান করতে পারবেন। পূর্বের পর্ব পড়তে ক্লিক করুন।
এক নজরে সূচী
ব্রাউজারের জাভাস্ক্রিপ্ট কোড লেখা ও রান করা
ইন্টারনেট ব্যবহারকারীদের ওয়েব ব্রাউজারের সাথে পরিচয় করিয়ে দেয়ার কিছু নেই। সবাই চিনেন ব্রাউজার কি জিনিস। তাও যদি ব্রাউজার কি না চিনেন তাহলে উইকিপিডিয়া থেকে ঘুরে আসতে পারেন।
যে কোন ব্রাউজারের ডেভেলপার মুড পাবেন। যেই মুডে গিয়ে কনসোল চালু করে জাভাস্ক্রিপ্ট কোড লিখে রান করা যাবে। মূলত ডিবাগিংয়ের জন্য বেশিভাগ সময় ডেভেলপাররা ব্রাউজারের কনসোলে জাভাস্ক্রিপ্ট টেষ্ট করে থাকে।
গুগল ক্রোম কনসোল ওপনে করতে ক্রোম ব্রাউজারের ডান পাশে উপর থেকে তিনটি ডট আইকনে ক্লিক করতে হবে। সেখান থেকে ‘More Tools’ অপশনে যেতে হবে। সেখান থেকে ‘Developer Tools’ এ ক্লিক করতে হবে।
তাহলে ব্রাউজারের নিজের দিকে নতুন একটি উইন্ডো চালু হবে। এটিই ডেভেলপার মুড। সেখান থেকে ‘Console’ নামে ট্যাবে যাবে। সেই ট্যাবে জাভাস্ক্রিপ্ট কোড লিখতে হবে। লিখে সেখানেই আউপপুট দেখতে পারবেন।
চলুন কনসোল একটা আউটপট দেখি । আপনি কনসোলে লিখুন :
console.log(“hello world, wc techcult”);
তাহলে নিচের মত আউটপুট দেখতে পাবেন। আপততো কোডটুকুতে কি বলা আছে বিস্তারিত হয়ত বুঝবে না। তবে অসুবিধা নেই। পরবতীতে আমরা ধীরে ধীরে জানব বিস্তারিত। তবুও একটু বলে নিচ্ছে এই কোডে বলা হযেছে “hello world, wc techcult” প্রিন্ট করার জন্য।
আশা করি ব্রাউজের গিয়ে আপনি ডেভেলপার মুডে গিয়ে কনসোল খুঁজে বের করে জাভাস্ক্রিপ্ট কোড লিখতে পারবেন।
তবে ব্রাউজের জাভাস্ক্রিপ্ট কোড লেখার কিছু অসুবিধা আছে। ধরুণ আপনি কিছু কোড লিখলেন তারপর রিফ্রেশ দিলেন ব্রাউজারটি আপনার সব কোড চলে যাবে। আলাদা ভাবে কোড সেইভ করতে হয়। একই সময় মাত্র এক লাইনে কোড লিখতে হয়। তাই প্রফেশনাল কাজে কোড এডিটর ব্যবহার করা হয় জাভাস্ক্রিপ্টের বড় বড় কোড লিখতে। এখন আমরা দেখবে কিভাবে তা ব্যবহার করতে হয়।
নোটপ্যাড++, এটম, সাবলাইমসহ অনেক রকমের কোড এডিটর রয়েছে। আপনি আপনার পছন্দমত যে কোন কোড এডিটর ব্যবহার করতে পারেন। সবগুলো কোড এডিটরের বেসিক ফিচার প্রায় একই রকম। আমি ব্যক্তিগতভাবে ভিজুয়াল কোড স্টুডিও ব্যবহার করি।
যেভাবে ভিজুয়াল স্টুডিও কোড এ জাভাস্ক্রিপ্ট রান করবেন (How to run JavaScript on Visual Studio Code)
প্রথম ভিজুয়াল স্টুডিও কোড এই ঠিকানা থেকে ডাউনলোড করতে হবে। আপনি যে অপারেটিং সিস্টেম ব্যবহার করেন সে অনুযায়ী সফটওয়্যারটি ডাউনলোড করে ইন্সটল করুন। একটি সফটওয়্যার ইন্সটল করার প্রসেস আশা করি আপনার জানা আছে। যেহেতু আপনি প্রোগ্রামিং শিখতে চাচ্ছেন, আপনার বিষয়টি জানার কথা। তাই ইন্সটল প্রসেসটি আর বিস্তারিত বললাম না।
এরপর আপনাকে নোড জেএস ডাউনলোড করে ইন্সটল করতে হবে। এই ঠিকানায় পাবেন সফটওয়্যারটি।
দুইটি সফটওয়্যার ইন্সটল হলে গেলে কেল্লা ফতে। আপনার ৯৯% কাজ শেষ। এখন জাস্ট কোড লিখবেন আর আউটপুট দেখবেন। অনেক সময় নোড জেএস ইন্সটল করার পরেও ভিজুয়াল স্টুডিও কোডে তা দেখাতে সমস্যা দেখাতে পারে। সেক্ষেত্রে সফটওয়্যারটি ইন্সটল করার পরেই আপনার কম্পিউটারটি রিস্টার দিতে পারেন।
এবার আপনার কম্পিউটারে যে কোন নামে একটি ফোল্ডার ওপেন করুন। তারপর ভিজুয়াল স্টুডিও কোড সফটওয়্যারটি চালু করে ‘file’ মেনু থেকে ওপেন ফোল্ডারে ক্লিক করে আপনার পছন্দের ফোল্ডারটি ওপেন করে নিন। তারপর ভিজুয়াল স্টুডিও কোডের বাম পাশে থাকা চালু করার ফোল্ডারের “+” আইকন ক্লিক করে একটি ফাইল খুলে নিন। মনে রাখবে ফাইলটির এক্সটেনশন হবে .js অথাৎ ধরুন আপনার জাভাস্ক্রিপ্ট ফাইলটির নাম techcult তাহলে নামটি হবে এমন techcult.js
এবার ডান পাশে থাকা এডিটরে আপনি কোড লিখতে পারবেন। কোড লেখার পরে তা রান করতে ভিজুয়াল স্টুডিও কোড উপরে থাকা ‘terminal’ অপশন থেকে ‘new terminal’ অপশনে ক্লিক করতে হবে। তারপর টারমিনাল চালু হলে সেখানে node লিখে স্পেস দিয়ে আপনার জাভাস্ক্রিপ্ট ফাইলের নামটি লিখতে হবে।
লেখাটা হবে এমন: node techcult.js
তাহলে টারমিনালে কোডটি রান হয়ে আউটপুট দেখা যাবে।
এইচএমএলের মধ্যে জাভাস্ক্রিপ্ট কিভাবে লিখতে হয় (How to Use JavaScript in HTML)
আমরা ইতিমধ্যে জানি যে কোন ওয়েবসাইটের মূল কাঠামোটি তৈরি করা হয় এইচএমএল নিয়ে। তাই ওয়েবসাইটের যখন জাভাস্ক্রিপ্ট লিখবেন সেগুলো এইচএমএলের সাথে যুক্ত করতে হয়। কয়েকভাবেই এইচএমএলের সাথে জাভাস্ক্রিপ্ট যুক্ত করতে পারেন।
HTML কোডের ভিতর <script> এলিমেন্ট ব্যবহার করে কোড লেখা যায়। head কিংবা body এর মধ্যে ইন্টানাল জাভাস্ক্রিপ্ট লেখা যায়। <script> ট্যাগ শেষ করতে হয় </script> এই ট্যাগ দিয়ে।
এমনকি এক্সটার্নাল জাভাস্ক্রিপ্ট ব্যবহার করা হয়। বেশিভাগে সময় বড় প্রজেক্টে এক্সটার্নাল জাভাস্ক্রিপ্ট ব্যবহার করা যায়। এটি অনেক এক্সটার্নাল সিএসএসএর মত। প্রথমে আপনাকে আলাদা একটি জাভাস্ক্রিপ্ট ফাইল ওপেন করতে হবে। কিভাবে তা করতে হবে উপরের বলা আছে। তারপর এইচটিএমএলের ক্লোজিং বডি ট্যাগের মধ্যে ফাইলটি যুক্ত করে দিতে হবে। .
কোডটি হবে এমন : <script src=”myScript.js”></script>
এভাবেই জাভাস্ক্রিপ্ট লিখে রান করতে হয়। আপততো এই উপায়গুলো জানলেই হবে। পরবর্তী টিউটোরিয়ালে আমরা মূল জাভাস্ক্রিপ্ট লেখা শুরু করব। টিউটোরিয়ালটি দেখতে ক্লিক করুন।
