HTML <script> এলিমেন্ট ব্যবহার শিখুন।
HTML <script> এলিমেন্ট আপনার ডকুমেন্টে JavaScript কোড যোগ করতে ব্যবহৃত হয়।
<script> দিয়ে আপনি JavaScript দুইভাবে যোগ করতে পারেন:
- JavaScript কোড ইনলাইন এম্বেড করতে, সরাসরি আপনার ডকুমেন্টে।
- বা এক্সটার্নাল JavaScript ফাইল (
.js) ইম্পোর্ট/লোড করতে।
সুতরাং এটি ইন্টারনাল (ইনলাইন) vs এক্সটার্নাল JavaScript লোডিংয়ের বিষয়।
আসুন দুটো অপশন দেখি।
ইনলাইন JavaScript
আপনার JavaScript কোড ইনলাইন এম্বেড করতে, ওপেনিং ও ক্লোজিং স্ক্রিপ্ট ট্যাগ ডিফাইন করুন, এবং JS কোড ভিতরে রাখুন:
<script>
// Add your JavaScript code here
</script><script> এলিমেন্টটি তখন আপনার ডকুমেন্টের <head> এলিমেন্টে রাখা যায়:
<!DOCTYPE html>
<html>
<head>
<script>
// Add your JavaScript code here
</script>
</head>
<body> ... </body>
</html>অথবা <head> এলিমেন্টের বাইরে, ক্লোজিং </body> এলিমেন্ট ট্যাগের ঠিক আগে:
<!DOCTYPE html>
<html>
<head></head>
<body> ...
<script>
// Add your JavaScript code here
</script>
</body>
</html>তাহলে <head> vs <body>-এ JavaScript রাখার পার্থক্য কী?
পার্থক্য হলো পারফরম্যান্স। এবং এটি বড় পার্থক্য হতে পারে।
ডিফল্টভাবে, HTML ডকুমেন্ট এবং তাদের এলিমেন্টগুলো উপরে থেকে নিচে পার্স (পড়া) ও রেন্ডার হয়। আপনি <head>-এ JavaScript কোড লোড ও রান করলে, আপনার পেজ এলিমেন্টের বাকি অংশ (আপনার দৃশ্যমান কন্টেন্ট) ব্লক থাকে যতক্ষণ না স্ক্রিপ্ট পার্স ও রান হয়ে শেষ হয়।
একটি JavaScript ফাইল এক্সিকিউট হতে কিছু মিলিসেকেন্ড (ms) বা কয়েক সেকেন্ড লাগতে পারে, কোডের সাইজ ও টাইপের ওপর নির্ভর করে। সুতরাং আপনার পেজ ইন্টারঅ্যাক্টিভ (উপযোগী) হওয়া পর্যন্ত ইউজারের জন্য ডিলে হয়।
আপনার JavaScript কোড নিচে (ক্লোজিং </body>-র ঠিক আগে) রাখলে, JavaScript কোড লোড ও এক্সিকিউট হবে বাকি সব পেজ কন্টেন্ট রেন্ডার হওয়া এবং ইউজারের কাছে দৃশ্যমান হওয়ার পর। এটি পেজ কন্টেন্ট ব্লকিং এড়াতে সাহায্য করে এবং তাই ইউজার ওয়েব পেজের সাথে দ্রুত ইন্টারঅ্যাক্ট করতে পারে।
ঠিক আছে, এখন আপনি জানেন কীভাবে ইনলাইন JavaScript কোড এম্বেড করবেন এবং সেটি সবচেয়ে পারফরম্যান্ট 방식으로 করবেন।
এখন আসুন এক্সটার্নাল JavaScript কোড ইম্পোর্ট করার কথা দেখি, এবং এটি ইন্টারনাল (ইনলাইন) JavaScript থেকে কীভাবে আলাদা।
এক্সটার্নাল JavaScript ফাইল ইম্পোর্ট করা
এক্সটার্নাল JavaScript কোড লোড করতে, আপনাকে .js এক্সটেনশন যুক্ত একটি ফাইল দিয়ে ইম্পোর্ট করতে হবে। যেমন main.js।
এটি এইভাবে কাজ করে:
<script src="main.js"></script>এবং ইনলাইন JavaScript-এর মতই, আপনি এটি আপনার <head> এলিমেন্টে রাখতে পারেন:
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
</head>
<body> ... </body>
</html>অথবা ক্লোজিং বডি এলিমেন্ট ট্যাগ </body>-র ঠিক আগে:
<!DOCTYPE html>
<html>
<head></head>
<body> ...
<script src="main.js"></script>
</body>
</html>defer অ্যাট্রিবিউট
আধুনিক JavaScript-এ, আপনার এক্সটার্নাল স্ক্রিপ্ট রান করার আরও বেশি পারফরম্যান্ট একটি পদ্ধতি রয়েছে পেজের নিচে লোড করার চেয়ে।
আমরা <script> এলিমেন্টে defer অ্যাট্রিবিউট ব্যবহার করতে পারি:
<script defer src="main.js"></script>এবং তারপর এটিকে আপনার <head> এলিমেন্টে রাখুন:
<!DOCTYPE html>
<html>
<head>
<script defer src="main.js"></script>
</head>
<body> ... </body>
</html>এই defer পদ্ধতিতে, আপনার JavaScript কোড লোড হয় (নয় এক্সিকিউট) যখন আপনার HTML কোড পার্স হচ্ছে, কিন্তু এটি এক্সিকিউট করে পরে HTML পার্সিং শেষ হয়।
আপনার এক্সটার্নাল স্ক্রিপ্ট নিচে রাখলে (ক্লোজিং </body>-র আগে), এই ক্যasc হয়:
- প্রথমে, HTML কোড পার্স হয়
- তারপর HTML রেন্ডার হয়
- তারপর JavaScript কোড লোড হয়
- তারপর JavaScript কোড এক্সিকিউট হয়
defer দিয়ে আমরা JavaScript কোড লোড করি যখন HTML পার্স হচ্ছে (প্যারালেলে), তাই যতক্ষণ আপনার HTML শেষ হয়, JavaScript কোড ইতিমধ্যে লোড হয়ে রেডি থাকে এক্সিকিউশনের জন্য।
এটি কেন ভালো? এটি সবসময় ভালো নয়। কিন্তু অনেক ওয়েবসাইট JavaScript-র ওপর নির্ভর করে যাতে পেজ ইন্টারঅ্যাক্টিভ (ইউজারই উপযোগী) হওয়ার সাথে সাথে কাজ করতে পারে — এবং এই পদ্ধতিতে আপনার সাইট ইন্টারঅ্যাকশনের জন্য অনেক দ্রুত রেডি হয়।
আপনি যদি এখন defer কনসেপ্ট সম্পূর্ণ বুঝতে না পারেন, চিন্তা নেই, প্র্যাকটিক্যাল এক্সপেরিয়েন্স পেলে বুঝতে পারবেন।
সবচেয়ে গুরুত্বপূর্ণ জিনিসটি জানা যে এটি সাধারণত আপনার ওয়েবসাইটে JavaScript কোড রান করার সবচেয়ে পারফরম্যান্ট পদ্ধতি।
জানা ভালো কিছু বিষয়:
deferঅ্যাট্রিবিউট শুধু এক্সটার্নাল JavaScript ফাইলে ব্যবহার করা যায় — ইনলাইন JavaScript কোডে নয়।- এক্সটার্নাল স্ক্রিপ্ট ইম্পোর্ট করার সময়, আপনাকে রিলেটিভ সোর্স পাথ স্পেসিফাই করতে হবে, তাই আপনার JavaScript
main.jsফাইল যদিjsনামক ফোল্ডারে থাকে আপনার রুট প্রজেক্ট ডিরেক্টরিতে, তবে আপনি এটিকে এইভাবে ইম্পোর্ট করবেনsrc="/js/main.js" - আপনি কখনও কখনও
<script>এলিমেন্ট দেখবেন যেগুলোর ল্যাঙ্গুয়েজ আইডেন্টিফায়ার রয়েছে,typeঅ্যাট্রিবিউট দিয়ে<script type="text/javascript">HTML5 (লেটেস্ট ভার্সন) এ আপনাকে এটা করতে হয় না, কারণ এটি ডিফল্টভাবেই সেট থাকে।
