আমাদের HTML সিরিজ (১০ পর্ব) আর CSS সিরিজ (১২ পর্ব) দুটোই শেষ হয়েছে। এখন আমরা জানি কীভাবে একটা ওয়েবপেজের কাঠামো বানাতে হয় আর সেটাকে সুন্দর করে সাজাতে হয়। কিন্তু এখনো পেজগুলো "স্থির" — বাটনে ক্লিক করলে কিছু হয় না, ফর্ম সাবমিট করলে কোনো রেসপন্স আসে না। আজ থেকে শুরু হচ্ছে নতুন সিরিজ — JavaScript এর হাতেখড়ি, যেখানে আমরা শিখবো কীভাবে একটা পেজকে সত্যিকারের ইন্টারঅ্যাক্টিভ বানানো যায়।
JavaScript কী?
JavaScript হলো একটা প্রোগ্রামিং ভাষা, যেটা ব্রাউজারে চলে (এবং সার্ভারেও, Node.js দিয়ে)। HTML আর CSS যদি বাড়ির কাঠামো আর সাজসজ্জা হয়, তাহলে JavaScript হলো বাড়ির বিদ্যুৎ ব্যবস্থা — লাইট জ্বালানো-নেভানো, দরজা খোলা-বন্ধ করা, মানে যা কিছু "কাজ করে" এমন সবকিছু।
JavaScript দিয়ে আমরা করতে পারি:
- বাটনে ক্লিক করলে কিছু ঘটানো
- ফর্মের ডেটা যাচাই করা (validation)
- পেজের কন্টেন্ট ডাইনামিকভাবে বদলানো
- সার্ভার থেকে ডেটা আনা (API call)
- অ্যানিমেশন ও ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করা
HTML, CSS ও JavaScript — কার কাজ কী
| ভাষা | কাজ |
|---|---|
| HTML | কাঠামো (Structure) |
| CSS | সাজসজ্জা (Style) |
| JavaScript | আচরণ ও যুক্তি (Behavior/Logic) |
JavaScript যুক্ত করার পদ্ধতি
CSS-এর মতোই JavaScript-ও তিনভাবে HTML-এ যুক্ত করা যায়।
১. Inline JavaScript
সরাসরি HTML ট্যাগের ভেতরে ইভেন্ট অ্যাট্রিবিউট হিসেবে:
<button onclick="alert('স্বাগতম!')">ক্লিক করো</button>
এটা কাজ করে, কিন্তু এই পদ্ধতি এড়িয়ে চলা উচিত — HTML আর JavaScript মিশে গেলে কোড পরিষ্কার রাখা কঠিন হয়ে যায়।
২. Internal JavaScript
<script> ট্যাগ দিয়ে HTML ফাইলের ভেতরেই লেখা হয়:
<body>
<h1>আমার পেজ</h1>
<script>
console.log("পেজ লোড হয়েছে");
</script>
</body>
৩. External JavaScript (সবচেয়ে ভালো পদ্ধতি)
একটা আলাদা .js ফাইলে কোড লিখে, HTML থেকে লিংক করা হয়:
<!-- script.js ফাইলে -->
console.log("পেজ লোড হয়েছে");
<!-- index.html ফাইলে --> <body> <h1>আমার পেজ</h1> <script src="script.js"></script> </body>
টিপস: <script> ট্যাগ সাধারণত </body>-এর ঠিক আগে বসানো হয়, <head>-এ না। কারণ ব্রাউজার উপর থেকে নিচে HTML পড়ে — script যদি উপরে থাকে, তাহলে সেটা এমন এলিমেন্ট খুঁজতে গিয়ে ব্যর্থ হতে পারে যেগুলো তখনো লোড হয়নি।
Console — তোমার প্রথম বন্ধু
ব্রাউজারে একটা বিশেষ প্যানেল আছে যাকে বলে Console — এখানে JavaScript-এর আউটপুট, error, এবং debug তথ্য দেখা যায়। এটা ওপেন করতে ব্রাউজারে F12 চাপো, তারপর "Console" ট্যাবে যাও।
console.log("হ্যালো, দুনিয়া!");
console.log(5 + 3);
console.log("আমার নাম আরিফ");
console.log() হলো JavaScript শেখার সবচেয়ে বেশি ব্যবহৃত ফাংশন — এটা দিয়ে যেকোনো মান কনসোলে দেখানো যায়। প্রতিটা কোড লেখার পর console.log() দিয়ে চেক করে দেখাটা একটা খুব ভালো অভ্যাস — সারাজীবন এটা কাজে লাগবে, শুধু শেখার সময় না, প্রফেশনাল কাজেও।
Statement ও Semicolon
JavaScript কোডের প্রতিটা লাইন (নির্দেশনা) কে বলা হয় একটা statement। প্রতিটা statement-এর শেষে সেমিকোলন (;) দেওয়া হয় — যদিও JavaScript এটা না দিলেও বেশিরভাগ ক্ষেত্রে নিজে বুঝে নেয়, তবু শুরু থেকেই সেমিকোলন দেওয়ার অভ্যাস করাই ভালো, এতে কোড পরিষ্কার থাকে ও ভবিষ্যতে বাগ কম হয়।
console.log("প্রথম লাইন");
console.log("দ্বিতীয় লাইন");
Comment লেখা
কোডের ভেতরে নিজের জন্য বা অন্যদের জন্য নোট লিখতে comment ব্যবহার হয় — ব্রাউজার এগুলো ইগনোর করে, শুধু চোখে দেখার জন্য:
// এটা এক লাইনের কমেন্ট
/*
এটা একটা
একাধিক লাইনের কমেন্ট
*/
console.log("এই লাইনটাই শুধু চলবে");
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>JavaScript পরিচিতি</title>
</head>
<body>
<h1>আমার প্রথম JavaScript পেজ</h1>
<button onclick="alert('তুমি ক্লিক করেছো!')">এখানে ক্লিক করো</button>
<script>
// এটা কনসোলে দেখা যাবে, পেজে না
console.log("পেজ সফলভাবে লোড হয়েছে");
console.log("দুই যোগ তিন সমান:", 2 + 3);
</script>
</body>
</html>
এই ফাইলটা ব্রাউজারে খুলে, F12 চেপে Console ট্যাবে গেলে উপরের দুইটা লাইন দেখা যাবে। বাটনে ক্লিক করলে একটা popup message-ও দেখা যাবে।
নিজে চেষ্টা করো
Exercise:
- একটা HTML ফাইল বানাও, তাতে একটা
<script>ট্যাগ বসাও - তিনটা আলাদা
console.log()লেখো — একটাতে টেক্সট, একটাতে একটা হিসাব, একটাতে তোমার নাম - ব্রাউজারে ফাইলটা খুলে
F12চেপে Console-এ ফলাফল দেখো - একটা বাটন বানাও যেটাতে ক্লিক করলে
alert()দিয়ে একটা মেসেজ দেখাবে
পরের পর্বে যা থাকছে
পর্ব ২-এ আমরা শিখবো Variable ও Data Type — let, const, var-এর পার্থক্য, এবং string, number, boolean-এর মতো ডেটা টাইপ, উদাহরণসহ।