HTML এর সাথে JavaScript যোগ করা
HTML পেজকে শুধু স্ট্যাটিক না রেখে ডাইনামিক ও ইন্টারেক্টিভ করার মূল হাতিয়ার হলো JavaScript। তবে HTML এর সাথে JavaScript যুক্ত করার বিভিন্ন উপায় আছে। প্রধান দুইটি উপায় হলো: Internal Script এবং External Script। এই ব্লগে আমরা এই দুইটি পদ্ধতি বিশদে দেখব এবং উদাহরণ সহ ব্যাখ্যা করব।
JavaScript কী?
JavaScript হলো একটি প্রোগ্রামিং ভাষা, যা ওয়েব পেজে ইন্টারেকশন, ডায়নামিক কনটেন্ট, এ্যানিমেশন, ফর্ম ভ্যালিডেশন ইত্যাদি করার জন্য ব্যবহৃত হয়। এটি ক্লায়েন্ট-সাইডে কাজ করে, অর্থাৎ ব্যবহারকারীর ব্রাউজারে সরাসরি চালানো হয়।
JavaScript এর কিছু মূল বৈশিষ্ট্য:
ওয়েব পেজকে ডায়নামিক করে তোলে।
HTML ও CSS এর সাথে সহজে ইন্টিগ্রেট করা যায়।
ব্রাউজারের ইভেন্ট যেমন ক্লিক, স্ক্রল, মাউসওভার ইত্যাদিতে প্রতিক্রিয়া দেখাতে পারে।
AJAX ও API কলের মাধ্যমে সার্ভার থেকে ডেটা লোড করতে পারে।
HTML এর সাথে JavaScript যোগ করার পদ্ধতি
HTML এ JavaScript যোগ করার প্রধান তিনটি উপায় রয়েছে:
Inline Script
Internal Script
External Script
আজ আমরা Internal এবং External Script নিয়ে বিস্তারিত আলোচনা করব।
Internal Script
Internal Script হলো HTML ডকুমেন্টের মধ্যেই JavaScript কোড লেখা। এটি <script> ট্যাগের মধ্যে করা হয়। সাধারণত <head> বা <body> এর মধ্যে লেখা যায়।
Internal Script এর সুবিধা
ছোট কোডের জন্য দ্রুত ও সহজ।
আলাদা ফাইলের প্রয়োজন হয় না।
পেজ লোডের সময় সাথে সাথে কোড লোড হয়।
Internal Script উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Internal JavaScript উদাহরণ</title>
<script>
// এখানে JavaScript কোড লেখা হয়েছে
function greetUser() {
alert("স্বাগতম, JavaScript শেখায়!");
}
</script>
</head>
<body>
<h1>Internal JavaScript উদাহরণ</h1>
<button onclick="greetUser()">ক্লিক করুন</button>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<script>ট্যাগের মধ্যে JavaScript কোড লেখা হয়েছে।greetUser()ফাংশন একটি পপ-আপ এলার্ট দেখায়।<button>এonclickইভেন্ট ব্যবহার করা হয়েছে ফাংশনটি চালানোর জন্য।
উল্লেখযোগ্য বিষয়:
যদি কোড
<head>এ থাকে, তবে ফাংশনকে<body>এ কল করতে কোনো সমস্যা হয় না।ছোট প্রোজেক্টের জন্য Internal Script সুবিধাজনক।
External Script
External Script হলো JavaScript কোডকে একটি আলাদা .js ফাইলে রাখা এবং HTML এ লিংক করা। এটি বড় প্রোজেক্টে বেশি ব্যবহার করা হয়।
External Script এর সুবিধা
কোড আলাদা ফাইলে রাখার মাধ্যমে ক্লিন ও মেইনটেইনেবল থাকে।
একাধিক HTML পেজে একই JavaScript ফাইল ব্যবহার করা যায়।
পেজ লোডিং এর সময় ব্রাউজার ফাইল কেশে রাখতে পারে, তাই দ্রুত লোড হয়।
External Script উদাহরণ
Step 1: JavaScript ফাইল তৈরি করুনscript.js নামে একটি ফাইল তৈরি করুন:
// script.js
function showMessage() {
alert("External JavaScript কাজ করছে!");
}
Step 2: HTML ফাইলে External Script যোগ করুন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>External JavaScript উদাহরণ</title>
<!-- External Script লিংক -->
<script src="script.js"></script>
</head>
<body>
<h1>External JavaScript উদাহরণ</h1>
<button onclick="showMessage()">ক্লিক করুন</button>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<script src="script.js"></script>ট্যাগ HTML ফাইলের সাথে জাভাস্ক্রিপ্ট ফাইলকে যুক্ত করে।showMessage()ফাংশন External ফাইলে লেখা হয়েছে।একাধিক HTML পেজে একই
script.jsব্যবহার করা যায়।
উল্লেখযোগ্য বিষয়:
External Script ব্যবহার করলে কোড পুনরায় ব্যবহারযোগ্য হয়।
বড় প্রোজেক্টে Internal Script ব্যবহারের চেয়ে External Script বেশি উপকারী।
Internal এবং External Script এর তুলনা
| বৈশিষ্ট্য | Internal Script | External Script |
| ফাইল অবস্থান | HTML ফাইলে | আলাদা .js ফাইলে |
| ব্যবহারযোগ্যতা | ছোট কোডের জন্য | বড় প্রোজেক্ট ও পুনঃব্যবহারযোগ্য কোডের জন্য |
| লোডিং টাইম | পেজ লোডের সাথে লোড হয় | ব্রাউজার ফাইল কেশে রাখে, দ্রুত লোড |
| রক্ষণাবেক্ষণ | কম সুবিধাজনক | সহজ ও ক্লিন কোড মেইনটেইন করা যায় |
| একাধিক পেজে ব্যবহার | সীমিত | অনেক HTML পেজে ব্যবহারযোগ্য |
JavaScript চালানোর সময় বিবেচ্য বিষয়
পজিশনিং:
<head>বা<body>এ স্ক্রিপ্ট রাখার সময় পেজ লোড প্রভাবিত হতে পারে।Defer এবং Async Attribute: External Script এ
deferবাasyncব্যবহার করে স্ক্রিপ্ট লোডিং কন্ট্রোল করা যায়।
<script src="script.js" defer></script>
defer: HTML পুরো লোড হওয়ার পর JavaScript চালায়।async: স্ক্রিপ্ট একবারে লোড হয়, পেজ লোডের সাথে সমান্তরাল।
5️⃣ ছোট উদাহরণ: Internal vs External
Internal:
<button onclick="alert('Internal Script!')">Click Me</button>
External:
external.js:
function greet() {
alert("External Script!");
}
HTML:
<button onclick="greet()">Click Me</button>
<script src="external.js"></script>
HTML এর সাথে JavaScript যোগ করা শেখা ওয়েব ডেভেলপমেন্টের প্রাথমিক ও গুরুত্বপূর্ণ ধাপ।
Internal Script: ছোট প্রোজেক্ট বা একবারের জন্য কোডের জন্য।
External Script: বড় প্রোজেক্ট, পুনঃব্যবহারযোগ্য কোড, এবং ক্লিন মেইনটেইনযোগ্য কোডের জন্য।
JavaScript শেখার সময় এই দুইটি পদ্ধতি ব্যবহার করে প্র্যাকটিস করা অত্যন্ত জরুরি। একবার Internal এবং External Script এর মধ্যে পার্থক্য বুঝে গেলে, ডাইনামিক ও ইন্টারেক্টিভ ওয়েব পেজ তৈরি করা সহজ হয়ে যায়।
