জাভাস্ক্রিপ্ট কোথায় এবং কিভাবে ব্যবহার করা হয়

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> ট্যাগ ব্যবহার করতে হয়না ।