ভূমিকা
HTML ওয়েবপেজের কাঠামো (Structure) তৈরি করে, আর JavaScript (JS) হলো ওয়েবপেজে ইন্টার্যাকশন, ডাইনামিক বিহেভিয়ার এবং স্মার্ট ফাংশনালিটি যোগ করার ভাষা।
এই পোস্টে HTML ও JavaScript কিভাবে একসাথে কাজ করে তা সহজ উদাহরণসহ ব্যাখ্যা করা হলো।
JavaScript কী করে?
JS ওয়েবপেজকে:
- ডাইনামিক
- Responsive
- ইউজার-ইন্টার্যাক্টিভ করে
যেমন:
- বোতামে ক্লিক করলে বার্তা দেখানো
- ফর্ম ভ্যালিডেশন
- ডেটা লোড করে UI আপডেট করা
- ড্রপডাউন, স্লাইডার, পপআপ, মেনু তৈরি
HTML এর সাথে JavaScript যুক্ত করার ৩টি পদ্ধতি
1) Inline JavaScript (ট্যাগের মধ্যে
ব্যবহার:
✔ দ্রুত টেস্ট করার জন্য
❌ বড় স্ক্রিপ্ট হলে messy হয় — তাই প্র্যাকটিসে কম ব্যবহার
2) Internal JavaScript (একই HTML ফাইলে script ট্যাগে)
উদাহরণ:
নির্দিষ্ট পেজের জন্য এটি ভালো
3) External JavaScript (JS আলাদা ফাইল হিসেবে)
ফাইল: script.js
HTML এ লিংক করুন:
✔ সবচেয়ে প্রফেশনাল
✔ performance, maintenance সব দিকেই best practice
DOM (Document Object Model) — HTML + JS এর সংযোগ সেতু
JS DOM ব্যবহার করে HTML কে নিয়ন্ত্রণ করে:
👉 টেক্সট পরিবর্তন
👉 স্টাইল পরিবর্তন
👉 এলিমেন্ট তৈরি/ডিলিট
👉 ক্লিক/টাইপ/স্ক্রল ইভেন্ট হ্যান্ডেল
উদাহরণ:
JavaScript দিয়ে ইভেন্ট হ্যান্ডলিং
ইভেন্ট মানে user interaction: click, input, hover, load ইত্যাদি।
উদাহরণ:
Variables, Functions & Logic
এগুলো ব্যবহার করে JavaScript সিদ্ধান্ত নেয়
→ কী কাজ করবে, কবে করবে, কিভাবে করবে
উদাহরণ:
Form Validation Example
ফর্ম সাবমিটের আগে ডেটা চেক করার জন্য JS ব্যবহৃত হয়।
HTML + JS এর Real Life Example
Interactive Message Toggle
বোতামে ক্লিক করলে JS টেক্সট পরিবর্তন করছে
➡ HTML + JS এর perfect coordination
JavaScript কোথায় শেখা প্রয়োজন?
✔ Frontend (HTML + CSS + JS)
✔ React / Vue / Angular framework
✔ Web applications
✔ Dynamic dashboard UI
✔ Animation ও UI interaction
Best Practices
✔ External JS ফাইল ব্যবহার
✔ HTML ও JS আলাদা রাখা
✔ DOM safe scripting — script ট্যাগ body শেষে
✔ console.log() ব্যাবহার করে Debug করা
✔ Semicolon রাখা
উপসংহার
HTML ওয়েবের skeleton
JavaScript ওয়েবের মস্তিষ্ক ও ইন্টারঅ্যাক্টিভ অংশ
দুইটি একসাথে = Dynamic & Functional Website
