<script> ট্যাগ
HTML এ, জাভাস্ক্রিপ্ট কোড <script> এবং </script> ট্যাগের মধ্যে সন্নিবেশ করা হয়।
উদাহরণ
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>দ্রষ্টব্য:
পুরানো জাভাস্ক্রিপ্ট উদাহরণ টাইপ অ্যাট্রিবিউট ব্যবহার করতে পারে: <script type="text/javascript">। টাইপ অ্যাট্রিবিউটের প্রয়োজন নেই। JavaScript হল HTML-এর ডিফল্ট স্ক্রিপ্টিং ভাষা।
জাভাস্ক্রিপ্ট ফাংশন এবং ঘটনা
একটি জাভাস্ক্রিপ্ট ফাংশন হল জাভাস্ক্রিপ্ট কোডের একটি ব্লক যা "কল" হলে কার্যকর করা যেতে পারে।
উদাহরণস্বরূপ, একটি ইভেন্ট ঘটলে একটি ফাংশন কল করা যেতে পারে, যেমন ব্যবহারকারী যখন একটি বোতামে ক্লিক করে।
পরবর্তী অধ্যায়ে আপনি কার্যকলাপ এবং ঘটনা সম্পর্কে আরও জানতে পারবেন।
জাভাস্ক্রিপ্টে <head> বা <body>
আপনি যেকোনো এইচটিএমএল ডকুমেন্টে যেকোনো সংখ্যক স্ক্রিপ্ট রাখতে পারেন।
স্ক্রিপ্টগুলি একটি HTML পৃষ্ঠার <body> বা <head> বিভাগে বা উভয় স্থানে স্থাপন করা যেতে পারে।
জাভাস্ক্রিপ্টে <head>
এই উদাহরণে, একটি জাভাস্ক্রিপ্ট ফাংশন একটি HTML পৃষ্ঠার <head> বিভাগে স্থাপন করা হয়।
বোতামটি ক্লিক করলে ফাংশনটি বলা হয়:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>লাইভ ডেমো:
এটি একটি অনুচ্ছেদ
জাভাস্ক্রিপ্টে <body>
এই উদাহরণে, একটি জাভাস্ক্রিপ্ট ফাংশন একটি HTML পৃষ্ঠার <body> বিভাগে স্থাপন করা হয়।
বোতামটি ক্লিক করলে ফাংশনটি বলা হয়:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<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
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}বহিরাগত স্ক্রিপ্টগুলি দরকারী যখন একই কোড বিভিন্ন ওয়েব পৃষ্ঠাগুলিতে ব্যবহার করা হয়।
জাভাস্ক্রিপ্ট ফাইল .js ফাইল এক্সটেনশন আছে.
একটি বাহ্যিক স্ক্রিপ্ট ব্যবহার করতে, <script> ট্যাগের src (উৎস) বৈশিষ্ট্যে স্ক্রিপ্ট ফাইলের নাম দিন:
উদাহরণ
<script src="myScript.js"></script>আপনি চাইলে এক্সটার্নাল স্ক্রিপ্ট রেফারেন্স <head> বা <body> এ রাখতে পারেন।
স্ক্রিপ্ট ঠিক যেখানে <script> ট্যাগ অবস্থিত সেখানে কাজ করবে।
সতর্কতা:
বাহ্যিক স্ক্রিপ্টে <script> ট্যাগ থাকা উচিত নয়।
বাহ্যিক জাভাস্ক্রিপ্ট সুবিধা
বাহ্যিক ফাইলগুলিতে স্ক্রিপ্ট স্থাপনের কিছু সুবিধা রয়েছে:
- এটি HTML এবং কোড আলাদা করে
- এটি এইচটিএমএল এবং জাভাস্ক্রিপ্ট পড়া এবং বজায় রাখা সহজ করে তোলে
- ক্যাশে করা জাভাস্ক্রিপ্ট ফাইলগুলি পেজ লোড করার গতি বাড়ায়
এক পৃষ্ঠায় একাধিক স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করতে - একাধিক স্ক্রিপ্ট ট্যাগ ব্যবহার করুন:
উদাহরণ
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>বাহ্যিক রেফারেন্স
একটি বাহ্যিক স্ক্রিপ্ট 3 টি ভিন্ন উপায়ে উল্লেখ করা যেতে পারে:
- সম্পূর্ণ URL সহ (সম্পূর্ণ ওয়েব ঠিকানা)
- একটি ফাইল পাথ সহ (যেমন /js/)
- কোন পথ ছাড়াই
এই উদাহরণটি myScript.js এর সাথে সংযোগ করতে সম্পূর্ণ URL ব্যবহার করে:
<script src="https://www.jassifteam.com/js/myScript.js"></script>এই উদাহরণটি myScript.js এর সাথে লিঙ্ক করার জন্য ফাইল পাথ ব্যবহার করে:
<script src="/js/myScript.js"></script>এই উদাহরণ myScript.js এর সাথে সংযোগ করার জন্য কোন পথ ব্যবহার করে না:
<script src="myScript.js"></script>HTML ফাইল পাথ অধ্যায়ে ফাইল পাথ সম্পর্কে আরও জানুন।
জাভাস্ক্রিপ্ট টিউটোরিয়াল
এই টিউটোরিয়ালের অনেক অধ্যায় ব্যায়ামের সাথে শেষ হয় যা আপনার জ্ঞানের স্তর পরীক্ষা করতে পারে।