কিভাবে HTML <script> এলিমেন্ট ব্যবহার করবেন

কিভাবে HTML <script> ব্যবহার করতে হয় তা জানুন উপাদান।

HTML <script> আপনার নথিতে জাভাস্ক্রিপ্ট কোড যোগ করতে উপাদান ব্যবহার করা হয়।

<script> সহ আপনি দুটি ভিন্ন উপায়ে জাভাস্ক্রিপ্ট যোগ করতে পারেন:

আপনি সরাসরি আপনার ডকুমেন্টের ভিতরে জাভাস্ক্রিপ্ট কোড ইনলাইনে এম্বেড করতে পারেন।
অথবা একটি বহিরাগত জাভাস্ক্রিপ্ট ফাইল আমদানি/লোড করুন (.js )।

সুতরাং এটি জাভাস্ক্রিপ্ট অভ্যন্তরীণ বনাম বাহ্যিকভাবে লোড করার বিষয়।

আসুন উভয় বিকল্পের দিকে নজর দেওয়া যাক।

ইনলাইন জাভাস্ক্রিপ্ট

আপনার জাভাস্ক্রিপ্ট কোড ইনলাইনে এম্বেড করতে, আপনি খোলা এবং বন্ধ করার স্ক্রিপ্ট ট্যাগগুলি সংজ্ঞায়িত করুন এবং ভিতরে 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> এ জাভাস্ক্রিপ্ট রাখার মধ্যে পার্থক্য কী বনাম <body> ?

পার্থক্য হল কর্মক্ষমতা। এবং এটি একটি বড় হতে পারে৷ পার্থক্য।

ডিফল্টরূপে, HTML নথি এবং তাদের উপাদানগুলিকে পার্স করা হয় (পড়া হয়) এবং উপরে থেকে নীচে রেন্ডার করা হয়। আপনি যখন <head>-এ JavaScript কোড লোড এবং চালান , বাকি এর রেন্ডারিং আপনার পৃষ্ঠার উপাদানগুলির (আপনার দৃশ্যমান বিষয়বস্তু) অবরুদ্ধ করা হয় যতক্ষণ না স্ক্রিপ্টটি পার্স করা হয় এবং এর কোডটি চালানো হয়।

একটি জাভাস্ক্রিপ্ট ফাইল এক্সিকিউট করতে কয়েক মিলিসেকেন্ড (এমএস), বা কয়েক সেকেন্ড সময় লাগতে পারে, আপনি যে কোডটি এক্সিকিউট করছেন তার আকার এবং প্রকারের উপর নির্ভর করে। সুতরাং আপনার পৃষ্ঠাটি ব্যবহারকারীর কাছে ইন্টারেক্টিভ (ব্যবহারযোগ্য) হওয়ার আগে এটি সময় বিলম্ব করতে পারে।

আপনার জাভাস্ক্রিপ্ট কোড নীচে রেখে (ঠিক </body> আগে ), জাভাস্ক্রিপ্ট কোড পরে পর্যন্ত লোড হবে না এবং এক্সিকিউট হবে না আপনার পৃষ্ঠার সমস্ত সামগ্রী রেন্ডার করা হয়েছে এবং ব্যবহারকারীর কাছে দৃশ্যমান। এটি ব্লক করা এড়িয়ে যায় পৃষ্ঠার বিষয়বস্তু এবং তাই ব্যবহারকারী ওয়েব পৃষ্ঠার সাথে শীঘ্রই যোগাযোগ করতে পারে৷

ঠিক আছে, এখন আপনি জানেন কিভাবে ইনলাইন জাভাস্ক্রিপ্ট কোড এম্বেড করতে হয় এবং কীভাবে এটি সবচেয়ে কার্যকরী উপায়ে করতে হয়।

এখন দেখা যাক এক্সটার্নাল জাভাস্ক্রিপ্ট কোড ইম্পোর্ট করা, এবং এটা কিভাবে ইন্টারনাল (ইনলাইন) জাভাস্ক্রিপ্ট থেকে আলাদা।

বাহ্যিক জাভাস্ক্রিপ্ট ফাইল আমদানি করুন

বাহ্যিক জাভাস্ক্রিপ্ট কোড লোড করতে, আপনাকে .js সহ একটি ফাইলের মাধ্যমে এটি আমদানি করতে হবে এক্সটেনশন যেমন main.js .

এটা এই মত কাজ করে:

<script src="main.js"></script>

এবং ইনলাইন জাভাস্ক্রিপ্টের মতই, আপনি হয় এটিকে আপনার <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 ব্যবহার করতে পারি <script>-এ অ্যাট্রিবিউট উপাদান:

<script defer src="main.js"></script>

এবং তারপর এটি আপনার <head> ভিতরে রাখুন উপাদান:

<!DOCTYPE html>
<html>
  <head>
    <script defer src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

এই defer দিয়ে পন্থা, আপনার জাভাস্ক্রিপ্ট কোড লোড হয় (চালিত হয় না) যখন আপনার HTML কোড পার্সিং হচ্ছে, কিন্তু এটি পরে পর্যন্ত কার্যকর হয় না এইচটিএমএল পার্সিং করা হয়েছে।

যদি আপনার বাহ্যিক স্ক্রিপ্ট নীচে রাখা হয় (ঠিক </body> আগে ), এটি ঘটে:

প্রথম, HTML কোড পার্স হয়
তারপর HTML রেন্ডার হয়
তারপর জাভাস্ক্রিপ্ট কোড লোড হয়
তারপর জাভাস্ক্রিপ্ট কোড কার্যকর করা হয়

defer দিয়ে আমরা লোড করছি জাভাস্ক্রিপ্ট কোড যখন HTML পার্সিং করা হচ্ছে (সমান্তরালে), তাই আপনার HTML সম্পন্ন হওয়ার সাথে সাথে জাভাস্ক্রিপ্ট কোড ইতিমধ্যেই লোড হয়ে গেছে এবং কার্যকর করার জন্য প্রস্তুত।

কেন এই ভাল? এটি অগত্যা সর্বদা ভাল হয় না। কিন্তু অনেক ওয়েবসাইট জাভাস্ক্রিপ্টের উপর নির্ভর করে অবিলম্বে কাজ করার জন্য, যত তাড়াতাড়ি পৃষ্ঠাটি ইন্টারেক্টিভ হয়ে যায় (ব্যবহারকারীর জন্য ব্যবহারযোগ্য) — এবং এই পদ্ধতিটি আপনার সাইটটিকে আরও দ্রুত ইন্টারঅ্যাকশনের জন্য প্রস্তুত করতে পারে।

এটা ঠিক আছে যদি আপনি এই defer সম্পূর্ণরূপে বুঝতে না পারেন এই মুহূর্তে ধারণা, আপনি একবার এটির সাথে কিছু বাস্তব অভিজ্ঞতা পাবেন।

এটি সাধারণত জানা সবচেয়ে গুরুত্বপূর্ণ বিষয় আপনার ওয়েবসাইটে জাভাস্ক্রিপ্ট কোড চালানোর সবচেয়ে কার্যকর উপায়।

জেনে রাখা ভালো:

আপনি শুধুমাত্র defer ব্যবহার করতে পারেন বহিরাগত জাভাস্ক্রিপ্ট ফাইলগুলিতে বৈশিষ্ট্য - ইনলাইন জাভাস্ক্রিপ্ট কোডে নয়৷
বাহ্যিক স্ক্রিপ্ট আমদানি করার সময়, আপনাকে আপেক্ষিক উত্স পথটি নির্দিষ্ট করতে হবে, তাই যদি আপনার JavaScript main.js ফাইল js নামে একটি ফোল্ডারে রয়েছে , আপনার রুট প্রজেক্ট ডিরেক্টরির ভিতরে, আপনি এটিকে এভাবে আমদানি করেন src="/js/main.js"
আপনি মাঝে মাঝে <script> দেখতে পাবেন type ব্যবহার করে যে উপাদানগুলির একটি ভাষা শনাক্তকারী রয়েছে বৈশিষ্ট্য <script type="text/javascript"> HTML5 (সর্বশেষ সংস্করণ) এ আপনাকে আর এটি করতে হবে না, যেহেতু এটি ইতিমধ্যেই ডিফল্টরূপে সেট করা আছে৷