JavaScript কোথায় ব্যবহার করবেন (JavaScript Where To)
জাভাস্ক্রিপ্ট এমন একটি শক্তিশালী ভাষা যা ওয়েবপেজের ইন্টারঅ্যাকটিভিটি ও ডাইনামিক বিহেভিয়ার তৈরির জন্য ব্যবহৃত হয়। কিন্তু প্রশ্ন হচ্ছে, এই কোডটি আমরা HTML ফাইলে কোথায় রাখবো? — এই অধ্যায়ে আমরা সেটাই বুঝবো।
৩টি সম্ভাব্য স্থান যেখানে আপনি JavaScript কোড লিখতে পারেন:
| অবস্থান | বর্ণনা |
|---|---|
| HTML Head এর ভিতরে | পেজ লোড হওয়ার আগে স্ক্রিপ্ট এক্সিকিউট হয়। সাধারণত ফাংশন ডিক্লেয়ার করার জন্য ব্যবহৃত হয়। |
| HTML Body এর ভিতরে | স্ক্রিপ্ট চলবে যখন ব্রাউজার ঐ অংশ পর্যন্ত রেন্ডার করবে। |
| External .js ফাইলে | JS কোড আলাদা রাখা হয়, রিইউজেবল ও মেইনটেনেবল হয়। |
১. JavaScript HTML <head> সেকশনে রাখা
এই পদ্ধতিতে স্ক্রিপ্ট পেজ লোড হওয়ার আগেই রান হয়, তাই DOM এলিমেন্টের উপর সরাসরি অ্যাকশন নিতে কিছু সীমাবদ্ধতা থাকতে পারে।
<head>
<script>
alert("Head থেকে কোড চলছে");
</script>
</head>
ব্যাখ্যা: আপনি যদি এই স্ক্রিপ্টে DOM ম্যানিপুলেশন করেন, তবে DOM এখনও লোড হয়নি বলে সমস্যা হতে পারে।
২. JavaScript HTML <body> এর শেষে রাখা
এই পদ্ধতি সবচেয়ে বেশি ব্যবহারযোগ্য। DOM পুরোপুরি লোড হওয়ার পরে স্ক্রিপ্ট চলে, তাই কার্যকর।
<body>
<h1 id="demo">স্বাগতম!</h1>
<script>
document.getElementById("demo").style.color = "blue";
</script>
</body>
ব্যাখ্যা: এখানে DOM এক্সেস করা নিরাপদ, কারণ বডির শেষ অংশে স্ক্রিপ্ট থাকায় সব এলিমেন্ট আগেই লোড হয়ে গেছে।
৩. External JavaScript (.js ফাইল ব্যবহার)
যখন আপনার স্ক্রিপ্ট বড় হয় বা বিভিন্ন পেজে রিইউজ করতে চান, তখন আলাদা JS ফাইল ব্যবহার করাই উত্তম।
<script src="main.js"></script>
main.js ফাইলে থাকা কোড:
alert("External ফাইল থেকে JS চলছে!");
কোন পদ্ধতি ব্যবহার করবেন?
- ছোট টেস্ট কোডের জন্য: বডির শেষে ইনলাইন স্ক্রিপ্ট
- বড় প্রজেক্ট বা পুনর্ব্যবহারযোগ্য কোডের জন্য: এক্সটার্নাল JS ফাইল
- সাধারণ ফাংশন ডিক্লেয়ারেশনের জন্য: head সেকশন