জাভাস্ক্রিপ্ট কোথায় এবং কিভাবে ব্যবহার করা হয়
html ডকুমেন্ট এ জাভাস্ক্রিপ্ট সর্বদা <script> এবং </script> এই দুই ট্যাগ এর মাঝে ব্যবহার করতে হয়। যেমনঃ
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
জাভাস্ক্রিপ্ট ফাংশন এবং ইভেন্ট
জাভাস্ক্রিপ্ট ফাংশন হচ্ছে কিছু কোড সমূহের সমষ্টি যা এক্সিকিউট হয় যখন একে কল কর হয় । উদাহরন হিসেবে বলা যায় যখন কোন ইভেন্ট সংঘটিত হয় তখন ফাংশন কল করা হয় ঐ ইভেন্ট রিলেটেড কোন কাজ করার জন্য । যেমন আমরা যখন কোন বাটনে ক্লিক করি তখন কিছু কাজ করা হয়।
ওকে বাদ দেই , এই সম্পর্কে আমরা পরে আবার অন্য কোন চ্যাপ্টারে আলোচনা করবো ।
<head> সেকশন এর ভিতরে জাভাস্ক্রিপ্ট
নিচের উদাহরনটিতে দেখেন জাভাস্ক্রিপ্ট ফাংশন <head> সেকশন এ লেখা হয়েছে । এই ফাংশনটি তখন কল করা হবে যখন একটি বাটনটিতে ক্লিক করা হবে।
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
<body> সেকশন এর ভিতরে জাভাস্ক্রিপ্ট
নিচের উদাহরনটিতে দেখেন জাভাস্ক্রিপ্ট ফাংশন <body> সেকশন এ লেখা হয়েছে । এই ফাংশনটি তখন কল করা হবে যখন একটি বাটনটিতে ক্লিক করা হবে।
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
<body> সেকশন এর নীচের দিকে স্ক্রিপ্টগুলি রাখার ফলে পেইজ লোডিং টাইম দ্রুত হয় , উপরের দিকে থাকলে জাভাস্ক্রিপ্ট কোড ইন্টারপ্রেশনের কারনে পেইজ লোডিং টাইম বেড়ে যায়।
এক্সর্টানাল জাভাস্ক্রিপ্ট
জাভাস্ক্রিপ্ট কোড কে আলাদা ফাইলেও রাখা যায়। যেমন নিম্নের কোডটিকে myScript.js হিসেবে সেইভ করুন । জাভাস্ক্রিপ্ট ফাইলের শেষে .js দিয়ে সেইভ করতে হয়।
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
এক্সর্টানাল স্ক্রিপ্ট তখন ব্যবহার করা হয় যখন একই কোড একাধিক পেইজ এ ব্যবহার করতে হয়।
এক্সর্টানাল স্ক্রিপ্ট ব্যবহার করতে <script> ট্যাগ এর src (source) এ্যাট্রিবিউটে জাভাস্ক্রিপ্ট ফাইলের নাম ( myScript.js ) লিখতে হয় । যেমনঃ <script src=”myScript.js”></script>
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
এক্সর্টানাল স্ক্রিপ্ট লিঙ্ক <head> এবং </body> এই দুই সেকশন এর মাঝে যেখানে খুশি আমরা ব্যবহার করতে পারি আমাদের প্রয়োজন মতো।
স্ক্রিপ্ট ঐ জায়গা হতেই লোড হবে যেখানে আমাদের <script>
tag অবস্থিত । এক্সর্টানাল স্ক্রিপ্ট এ <script> ট্যাগ ব্যবহার করতে হয়না ।