কম্পিউটার টিউটোরিয়াল
 Computer >> কম্পিউটার টিউটোরিয়াল >  >> প্রোগ্রামিং >> প্রোগ্রামিং

জাভাস্ক্রিপ্ট ইন্টিগ্রেশন আয়ত্ত করা:এইচটিএমএল পারফরম্যান্সের জন্য সেরা অনুশীলন

পরিচয়

এই নিবন্ধটি আপনার HTML ফাইলগুলিতে জাভাস্ক্রিপ্ট যোগ করার একটি ব্যাপক ওভারভিউ প্রদান করবে, তিনটি মূল পদ্ধতির বিশদ বিবরণ দেবে:<head>-এ স্ক্রিপ্টগুলি ইনলাইন স্থাপন করা , <body>-এ ইনলাইন , এবং বাহ্যিক .js লিঙ্ক করা ফাইল শুধু 'কীভাবে' এর বাইরেও, এই নিবন্ধটি সমালোচনামূলক 'কেন' নিয়ে আলোচনা করবে, প্রতিটি পদ্ধতির উল্লেখযোগ্য কার্যক্ষমতার প্রভাব ব্যাখ্যা করে, যার মধ্যে রেন্ডার-ব্লকিং, ব্রাউজার ক্যাশিং, এবং ডিফার এবং অ্যাসিঙ্কের মতো আধুনিক বৈশিষ্ট্যের ব্যবহার অন্তর্ভুক্ত।

তত্ত্ব এবং অনুশীলন সেতু করার জন্য, টিউটোরিয়ালটিতে ব্যবহারিক, বাস্তব-জগতের উদাহরণগুলি অন্তর্ভুক্ত রয়েছে যেমন একটি ডার্ক মোড টগল তৈরি করা এবং একটি ওয়েব ফর্ম যাচাই করা। অবশেষে, এটি আপনাকে পরিষ্কার, রক্ষণাবেক্ষণযোগ্য কোড লেখার জন্য প্রয়োজনীয় সর্বোত্তম অনুশীলন এবং ব্রাউজারের বিকাশকারী কনসোল ব্যবহার করে সাধারণ প্রাথমিক ত্রুটিগুলি সমাধান করতে সাহায্য করার জন্য একটি সমস্যা সমাধানের নির্দেশিকা দিয়ে সজ্জিত করবে, যাতে আপনি আত্মবিশ্বাসের সাথে আপনার ওয়েব বিকাশ প্রকল্পগুলি শুরু করতে পারেন।

একটি জাভাস্ক্রিপ্ট প্রকল্প দ্রুত স্থাপন করা প্রয়োজন? DigitalOcean অ্যাপ প্ল্যাটফর্ম দেখুন এবং কয়েক মিনিটের মধ্যে GitHub থেকে সরাসরি একটি JS প্রকল্প স্থাপন করুন।

প্রধান টেকওয়ে

  • জাভাস্ক্রিপ্ট যোগ করার জন্য সর্বোত্তম অনুশীলন হল একটি বাহ্যিক .js ব্যবহার করা ভাল সংগঠন, রক্ষণাবেক্ষণ এবং পুনরায় ব্যবহারযোগ্যতার জন্য ফাইল।
  • <script> স্থাপন করা <head>-এ ট্যাগ কর্মক্ষমতার জন্য সবচেয়ে খারাপ কারণ এটি রেন্ডার-ব্লকিং, ব্যবহারকারীদের একটি ফাঁকা পৃষ্ঠা দেখতে বাধ্য করে৷
  • defer ব্যবহার করে বহিরাগত স্ক্রিপ্টের বৈশিষ্ট্য হল সর্বোত্তম কর্মক্ষমতার জন্য প্রস্তাবিত আধুনিক পদ্ধতি৷
  • বাহ্যিক জাভাস্ক্রিপ্ট ফাইলগুলি ব্রাউজার ক্যাশিংয়ের মাধ্যমে একটি উল্লেখযোগ্য কর্মক্ষমতা বৃদ্ধি করে, যা ইনলাইন স্ক্রিপ্টগুলি করে না৷
  • একটি একক .js ফাইল একাধিক পৃষ্ঠা জুড়ে লিঙ্ক করা যেতে পারে, আপডেট এবং রক্ষণাবেক্ষণকে অনেক বেশি দক্ষ করে তোলে।
  • ডেভেলপার কনসোল (F12) হল সাধারণ জাভাস্ক্রিপ্ট ত্রুটির সমস্যা সমাধানের জন্য সবচেয়ে গুরুত্বপূর্ণ টুল।

পদ্ধতি 1:কিভাবে একটি ইনলাইন স্ক্রিপ্ট <head> এ যোগ করবেন

আপনি ডেডিকেটেড HTML ট্যাগ <script> ব্যবহার করে একটি HTML নথিতে জাভাস্ক্রিপ্ট কোড যোগ করতে পারেন যা জাভাস্ক্রিপ্ট কোডের চারপাশে মোড়ানো। <script> ট্যাগ <head>-এ স্থাপন করা যেতে পারে আপনার HTML এর বিভাগে অথবা <body>-এ বিভাগ, আপনি কখন জাভাস্ক্রিপ্ট লোড করতে চান তার উপর নির্ভর করে।

সাধারণত, JavaScript কোড নথির ভিতরে যেতে পারে <head> এটিকে আপনার HTML নথির মূল বিষয়বস্তুর বাইরে রাখার জন্য বিভাগ।

চলুন Today's Date ব্রাউজার শিরোনাম সহ নিম্নলিখিত মৌলিক HTML নথিটি বিবেচনা করি :

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
</head>
 
<body>
</body>
 
</html>

একটি স্ক্রিপ্ট যোগ করতে যা একটি সতর্কতা তৈরি করে, আমরা একটি <script> যোগ করতে পারি ট্যাগ এবং <title> এর নীচে আমাদের জাভাস্ক্রিপ্ট কোড ট্যাগ, নীচে দেখানো হিসাবে:

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
 <script>
 let d = new Date();
 alert("Today's date is " + d);
 </script>
</head>
 
<body>
</body>
 
</html>

এখানে স্ক্রিপ্ট রাখা ব্রাউজারকে <body>-এ বিষয়বস্তু রেন্ডার করা শুরু করার আগে জাভাস্ক্রিপ্ট পার্স এবং এক্সিকিউট করার জন্য সংকেত দেয়। পৃষ্ঠার।

এই পদ্ধতিটি স্ক্রিপ্টগুলির জন্য সবচেয়ে উপযুক্ত যেগুলিকে পৃষ্ঠার উপাদানগুলির সাথে সরাসরি ইন্টারঅ্যাক্ট করার প্রয়োজন নেই৷ যখন <head> এ একটি স্ক্রিপ্ট চলে, ব্রাউজার এখনও ডকুমেন্ট অবজেক্ট মডেল (DOM) তৈরি করেনি <body> এর জন্য . এর মানে হল যে কোনও HTML উপাদান যেমন শিরোনাম, অনুচ্ছেদ বা ডিভ এখনও বিদ্যমান নেই। ফলস্বরূপ, কোড যা এই উপাদানগুলি খুঁজে বা সংশোধন করার চেষ্টা করে (যেমন, document.getElementById() ব্যবহার করে ) ব্যর্থ হবে। এই পদ্ধতিটি তাই পরবর্তী ব্যবহারের জন্য ফাংশন এবং ভেরিয়েবল সেট আপ করার জন্য বা তৃতীয় পক্ষের বিশ্লেষণ স্ক্রিপ্টগুলি অন্তর্ভুক্ত করার জন্য আদর্শ যা যত তাড়াতাড়ি সম্ভব লোড করা দরকার৷

একবার আপনি পৃষ্ঠাটি লোড করলে, আপনি এর অনুরূপ একটি সতর্কতা পাবেন:

জাভাস্ক্রিপ্ট ইন্টিগ্রেশন আয়ত্ত করা:এইচটিএমএল পারফরম্যান্সের জন্য সেরা অনুশীলন

পদ্ধতি 2:কিভাবে একটি ইনলাইন স্ক্রিপ্ট <body> এ যোগ করবেন

<script> ট্যাগ <body>-এও স্থাপন করা যেতে পারে বিভাগ যখন একটি স্ক্রিপ্ট এখানে স্থাপন করা হয়, তখন HTML পার্সার স্ক্রিপ্টটি সঠিক বিন্দুতে যেখানে এটি ডকুমেন্টে প্রদর্শিত হবে সেখানে চালানোর জন্য তার কাজকে বিরতি দেবে। এটি যেকোন জাভাস্ক্রিপ্ট কোডের জন্য প্রয়োজনীয় পদ্ধতি যা অবিলম্বে একটি HTML উপাদান খুঁজে পেতে এবং সংশোধন করতে হবে৷

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

সরাসরি HTML বডিতে তারিখ লিখতে এই পদ্ধতিটি ব্যবহার করা যাক।

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
</head>
 
<body>
 <script>
 let d = new Date();
 document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
 </script>
</body>
 
</html>

একটি ওয়েব ব্রাউজারের মাধ্যমে লোড করা উপরের HTML ডকুমেন্টের আউটপুট নিচের মত দেখাবে:

জাভাস্ক্রিপ্ট ইন্টিগ্রেশন আয়ত্ত করা:এইচটিএমএল পারফরম্যান্সের জন্য সেরা অনুশীলন

যে স্ক্রিপ্টগুলি ছোট বা যেগুলি শুধুমাত্র একটি পৃষ্ঠায় চলে সেগুলি একটি HTML ফাইলের মধ্যে ভাল কাজ করতে পারে, তবে বড় স্ক্রিপ্ট বা স্ক্রিপ্টগুলির জন্য যা অনেক পৃষ্ঠায় ব্যবহার করা হবে, এটি খুব কার্যকর সমাধান নয় কারণ এটি সহ পড়া এবং বোঝা কঠিন বা কঠিন হয়ে উঠতে পারে। পরবর্তী বিভাগে, আমরা কীভাবে আপনার HTML নথিতে একটি পৃথক জাভাস্ক্রিপ্ট ফাইল পরিচালনা করব তা নিয়ে যাব৷

পদ্ধতি 3:একটি পৃথক জাভাস্ক্রিপ্ট ফাইলের সাথে কীভাবে কাজ করবেন

বৃহত্তর স্ক্রিপ্ট বা কোডের জন্য যা একাধিক পৃষ্ঠা জুড়ে ব্যবহার করা প্রয়োজন, সবচেয়ে কার্যকর এবং পেশাদার সমাধান হল জাভাস্ক্রিপ্টকে .js সহ একটি পৃথক ফাইলে স্থাপন করা। এক্সটেনশন তারপর আপনি <script> ব্যবহার করে আপনার HTML থেকে এই বাহ্যিক ফাইলটির সাথে লিঙ্ক করতে পারেন src দিয়ে ট্যাগ করুন (উৎস) বৈশিষ্ট্য।

এই পদ্ধতির সুবিধাগুলি উল্লেখযোগ্য:

  • উদ্বেগের বিচ্ছেদ :এটি আপনার এইচটিএমএলকে স্ট্রাকচারের জন্য, স্টাইলিংয়ের জন্য CSS এবং জাভাস্ক্রিপ্টকে আলাদা ফাইলে ইন্টারঅ্যাকটিভিটির জন্য রাখে। এটি আপনার প্রকল্পকে আরও পরিষ্কার, আরও সংগঠিত এবং ডিবাগ করা সহজ করে তোলে৷
  • পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ :একটি একক স্ক্রিপ্ট ফাইল, যেমন main-navigation.js , আপনার ওয়েবসাইটের প্রতিটি পৃষ্ঠা থেকে লিঙ্ক করা যেতে পারে। আপনি যদি নেভিগেশন লজিক আপডেট করতে চান তবে আপনাকে শুধুমাত্র সেই একটি ফাইলটি সম্পাদনা করতে হবে।
  • ব্রাউজার ক্যাশিং৷ :যখন একজন ব্যবহারকারী প্রথমবার আপনার সাইট পরিদর্শন করে, তখন তাদের ব্রাউজার .js ফাইলটি ডাউনলোড করে। পরবর্তী পরিদর্শনে বা একই ফাইল ব্যবহার করে এমন অন্যান্য পৃষ্ঠাগুলিতে নেভিগেট করার সময়, ব্রাউজার এটিকে আবার ডাউনলোড করার পরিবর্তে তার সংরক্ষিত (ক্যাশেড) অনুলিপি ব্যবহার করবে। এটি লোড করার সময়কে ব্যাপকভাবে উন্নত করে।

একটি জাভাস্ক্রিপ্ট ডকুমেন্টকে একটি HTML ডকুমেন্টের সাথে কিভাবে সংযোগ করতে হয় তা প্রদর্শন করতে, আসুন একটি ছোট ওয়েব প্রকল্প তৈরি করি। এটি script.js নিয়ে গঠিত js/-এ ডিরেক্টরি, style.css css/-এ ডিরেক্টরি, এবং একটি প্রধান index.html প্রকল্পের মূলে।

project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html

আমাদের জাভাস্ক্রিপ্ট কোড সরানো যাক যা তারিখটিকে একটি <h1> হিসেবে দেখাবে script.js-এর শিরোনাম ফাইল:

script.js

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

এর পরে, আসুন style.css সম্পাদনা করি <h1> এ একটি পটভূমির রঙ এবং শৈলী যোগ করে ফাইল করুন হেডার:

style.css

body {
 background-color: #0080ff;
}
 
h1 {
 color: #fff;
 font-family: Arial, Helvetica, sans-serif;
}

অবশেষে, আমরা আমাদের index.html থেকে স্ক্রিপ্ট এবং স্টাইলশীট উভয়ই উল্লেখ করতে পারি ফাইল আমরা একটি <link> ব্যবহার করি <head>-এ ট্যাগ করুন CSS এবং একটি <script> এর জন্য একটি src দিয়ে ট্যাগ করুন <body>-এ অ্যাট্রিবিউট জাভাস্ক্রিপ্টের জন্য।

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
 <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 <script src="js/script.js"></script>
</body>
 
</html>

এখন, জাভাস্ক্রিপ্ট এবং সিএসএসের জায়গায়, আমাদের প্রকল্প অনেক বেশি সংগঠিত। যখন আমরা index.html লোড করি ওয়েব ব্রাউজারে পৃষ্ঠায়, আমাদের বর্তমান তারিখ সহ একটি স্টাইলযুক্ত পৃষ্ঠা দেখতে হবে যা নীচের মতো দেখায়:

জাভাস্ক্রিপ্ট ইন্টিগ্রেশন আয়ত্ত করা:এইচটিএমএল পারফরম্যান্সের জন্য সেরা অনুশীলন

এখন যেহেতু আমরা একটি ফাইলে জাভাস্ক্রিপ্ট রেখেছি, আমরা এটিকে অতিরিক্ত ওয়েব পৃষ্ঠাগুলি থেকে একইভাবে কল করতে পারি এবং সেগুলিকে একটি একক অবস্থানে আপডেট করতে পারি। এই পদ্ধতিটি আপনার ওয়েব প্রকল্পগুলিতে জাভাস্ক্রিপ্ট পরিচালনা করার জন্য সবচেয়ে সংগঠিত এবং মাপযোগ্য উপায় প্রদান করে। বাহ্যিক স্ক্রিপ্টগুলি কীভাবে লোড হয় তার উপর আরও বেশি নিয়ন্ত্রণের জন্য, আপনি async ব্যবহার করে দেখতে পারেন এবং defer <script>-এর বৈশিষ্ট্য ট্যাগ।

কিছু বাস্তব-জগতের উদাহরণ কি?

এখন পর্যন্ত আমরা যা শিখেছি তার উপর ভিত্তি করে কিছু বাস্তব-বিশ্বের উদাহরণ দেখি।

1. সাধারণ ডার্ক মোড টগল

প্রায় প্রতিটি আধুনিক ওয়েবসাইট বা অ্যাপ একটি ডার্ক মোড অফার করে। জাভাস্ক্রিপ্টের সাথে একটি CSS ক্লাস টগল করে এটি অর্জন করা যেতে পারে।

HTML: 

<!DOCTYPE html>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Dark Mode</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <button id="theme-toggle">Toggle Dark Mode</button>
 <h1 id="title">DigitalOcean</h1>
 <p>This is some example text on the page.</p>
 <script src="js/script.js"></script>
</body>
</html>

CSS: 

/* This class will be added or removed by JavaScript */
.dark-mode {
 background-color: #222;
 color: #eee;
}

জাভাস্ক্রিপ্ট: 

const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
 document.body.classList.toggle('dark-mode');
});

জাভাস্ক্রিপ্ট প্রথমে তার আইডি ব্যবহার করে বোতামটি খুঁজে পায়। এটি তখন একটি ইভেন্ট শ্রোতাকে সংযুক্ত করে যা একটি ক্লিকের জন্য অপেক্ষা করে। বোতামটি ক্লিক করা হলে, classList.toggle('dark-mode') কমান্ড চলে। যদি <body> উপাদানটিতে .dark-mode নেই ক্লাস, জাভাস্ক্রিপ্ট এটি যোগ করে। যদি এটি ইতিমধ্যেই থাকে তবে জাভাস্ক্রিপ্ট এটি সরিয়ে দেয়। ব্রাউজার তাৎক্ষণিকভাবে সেই শ্রেণীর সাথে যুক্ত CSS শৈলী প্রয়োগ করে।

2. মৌলিক ফর্ম বৈধতা

ওয়েবসাইটগুলিকে নিশ্চিত করতে হবে যে ব্যবহারকারীরা জমা দেওয়ার আগে সঠিকভাবে ফর্মগুলি পূরণ করে। জাভাস্ক্রিপ্ট একটি পৃষ্ঠা পুনরায় লোড ছাড়াই তাৎক্ষণিকভাবে এটি পরীক্ষা করতে পারে৷

HTML: 

<!DOCTYPE html>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Form Validator</title>
</head>
<body>
 <form id="contact-form">
 <label for="email">Email:</label>
 <input type="text" id="email" placeholder="you@example.com">
 <button type="submit">Subscribe</button>
 <p id="error-message" style="color: red;"></p>
 </form>
 <script src="js/script.js"></script>
</body>
</html>

জাভাস্ক্রিপ্ট: 

const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
contactForm.addEventListener('submit', function(event) {
 if (!emailInput.value.includes('@')) {
 event.preventDefault(); 
 
 errorMessage.textContent = 'Please enter a valid email address.';
 } else {
 errorMessage.textContent = '';
 }
});

স্ক্রিপ্টটি submit এর জন্য শোনে ফর্মে ইভেন্ট। যখন আপনি "Subscribe" ক্লিক করুন বোতাম, ফাংশন চলে। এটি প্রথমে পরীক্ষা করে যে ইমেল ইনপুটের ভিতরে পাঠ্যটিতে একটি @ রয়েছে কিনা প্রতীক।

  • যদি তা না হয়, event.preventDefault() ফর্মের ডিফল্ট জমা দেওয়ার আচরণ বন্ধ করে। এটি তারপর ব্যবহারকারীর কাছে একটি সহায়ক ত্রুটি বার্তা প্রদর্শন করে৷
  • যদি এটি করে, স্ক্রিপ্ট কিছুই করে না, এবং ফর্মটি যথারীতি জমা হয়।

প্রতিটি পদ্ধতির জন্য কর্মক্ষমতা বিবেচনা কি?

চলুন আলোচনা করা যাক প্রতিটি জাভাস্ক্রিপ্ট লোডিং পদ্ধতির জন্য মূল কর্মক্ষমতা বিবেচনার বিষয়গুলি নিয়ে আলোচনা করা যাক:

<head>-এ ইনলাইন স্ক্রিপ্ট

  • প্রাথমিক সমস্যা: রেন্ডার-ব্লকিং

    <head>-এ একটি স্ক্রিপ্ট স্থাপন করা কর্মক্ষমতা উপর সবচেয়ে উল্লেখযোগ্য নেতিবাচক প্রভাব আছে. পৃষ্ঠার <body> কোনো অংশ রেন্ডার করার আগে ব্রাউজারকে অবশ্যই JavaScript ডাউনলোড, পার্স এবং এক্সিকিউট করতে হবে . যদি আপনার স্ক্রিপ্ট বড় হয় বা ধীরে ধীরে চলে, তাহলে স্ক্রিপ্ট শেষ না হওয়া পর্যন্ত ব্যবহারকারী একটি ফাঁকা সাদা পৃষ্ঠার দিকে তাকিয়ে থাকবে। এটি ফার্স্ট কনটেন্টফুল পেইন্ট (FCP)-এ সময় বাড়ায় , একটি সমালোচনামূলক ব্যবহারকারীর অভিজ্ঞতা মেট্রিক।

  • ক্যাশিং:৷ কোনোটিই নয়

    ইনলাইন স্ক্রিপ্ট এইচটিএমএল ডকুমেন্টেরই অংশ। তারা ব্রাউজার দ্বারা আলাদাভাবে ক্যাশে করা যাবে না. প্রতিবার যখন একজন ব্যবহারকারী পৃষ্ঠাটি পরিদর্শন করে, স্ক্রিপ্টটি পুনরায় ডাউনলোড করা হয় এবং বাকি HTML সহ পুনরায় পার্স করা হয়৷

এই পদ্ধতিটি সাধারণত পারফরম্যান্সের জন্য সবচেয়ে খারাপ এবং স্ক্রিপ্টটি খুব ছোট না হলে এড়ানো উচিত এবং অন্য কিছুর আগে অবশ্যই চালানো উচিত।

<body>-এ ইনলাইন স্ক্রিপ্ট

  • প্রাথমিক সমস্যা: আংশিক রেন্ডার-ব্লকিং

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

    ৷

  • ক্যাশিং:৷ কোনোটিই নয়

    ঠিক <head>-এর স্ক্রিপ্টের মত , <body>-এ ইনলাইন স্ক্রিপ্ট HTML এর অংশ এবং স্বাধীনভাবে ক্যাশে করা যায় না।

শরীরের শেষে একটি স্ক্রিপ্ট স্থাপন করা গতির উপলব্ধি উন্নত করার জন্য একটি ভাল কৌশল কারণ বিষয়বস্তু দ্রুত দৃশ্যমান হয়। যাইহোক, এটি এখনও পৃষ্ঠাটিকে সম্পূর্ণ ইন্টারেক্টিভ হতে বিলম্ব করতে পারে।

বাহ্যিক জাভাস্ক্রিপ্ট ফাইল

এই পদ্ধতিটি সর্বাধিক নমনীয়তা এবং সর্বোত্তম কার্যক্ষমতা প্রদান করে, প্রাথমিকভাবে দুটি কারণের কারণে:ব্রাউজার ক্যাশিং এবং বিশেষ লোডিং বৈশিষ্ট্য৷

  • প্রাথমিক সুবিধা: ক্যাশিং এবং অ্যাসিঙ্ক্রোনাস লোডিং

    • ক্যাশিং৷ :এটাই সবচেয়ে বড় পারফরম্যান্স জয়। একটি বাহ্যিক .js ফাইলটি প্রথম দর্শনে একবার ডাউনলোড করা হয়। পরবর্তী সমস্ত পৃষ্ঠাগুলির জন্য যেগুলি একই স্ক্রিপ্ট ব্যবহার করে, ব্রাউজার তার স্থানীয় ক্যাশে থেকে ফাইলটি লোড করবে, নেটওয়ার্ক বিলম্ব দূর করবে এবং সাইটটিকে উল্লেখযোগ্যভাবে দ্রুত করবে৷

    • defer এবং async গুণাবলী: বাহ্যিক স্ক্রিপ্ট দুটি শক্তিশালী বৈশিষ্ট্যের ব্যবহার আনলক করে।

      • <script defer src="..."></script> :এটি ব্রাউজারকে এইচটিএমএল পার্স করার সময় পটভূমিতে স্ক্রিপ্ট ডাউনলোড করতে বলে। সম্পূর্ণ নথি পার্স করার পরেই স্ক্রিপ্টটি কার্যকর করা হয়। এটি প্রস্তাবিত আধুনিক পদ্ধতি কারণ এটি অ-ব্লকিং এবং গ্যারান্টি দেয় যে স্ক্রিপ্টটি HTML-এ প্রদর্শিত ক্রম অনুসারে চলবে৷

      • <script async src="..."></script> :এটি রেন্ডারিং ব্লক না করেও পটভূমিতে স্ক্রিপ্ট ডাউনলোড করে। যাইহোক, এটি ডাউনলোড শেষ হওয়ার মুহুর্তে স্ক্রিপ্টটি কার্যকর করবে, যা যেকোনো সময় ঘটতে পারে এবং রেন্ডারিংকে বাধাগ্রস্ত করতে পারে। এটি স্বাধীন, তৃতীয় পক্ষের স্ক্রিপ্টগুলির জন্য (যেমন বিজ্ঞাপন বা বিশ্লেষণ) সর্বোত্তম যেখানে কার্যকর করার আদেশ কোন ব্যাপার না৷

defer এর সাথে লিঙ্ক করা একটি বাহ্যিক ফাইল ব্যবহার করা attribute হল সর্বোত্তম কর্মক্ষমতার জন্য সর্বোত্তম অনুশীলন। এটি শক্তিশালী ব্রাউজার ক্যাশিংয়ের সাথে অ-ব্লকিং লোডিংয়ের সুবিধাগুলিকে একত্রিত করে৷

কিছু সেরা অনুশীলন কি?

আপনার HTML ফাইলগুলিতে জাভাস্ক্রিপ্টের সাথে কাজ করার জন্য এখানে কিছু প্রয়োজনীয় সেরা অনুশীলন এবং সমস্যা সমাধানের টিপস রয়েছে৷

  • জাভাস্ক্রিপ্টকে এক্সটার্নাল ফাইলে রাখুন :সর্বদা একটি .js লিঙ্ক করা পছন্দ করুন ফাইল (<script src="..."></script> ) আপনার HTML এ সরাসরি জাভাস্ক্রিপ্ট লেখার পরিবর্তে। এটি আপনার কোডকে সংগঠিত রাখে, বজায় রাখা সহজ এবং ব্রাউজারকে দ্রুত লোড করার জন্য ফাইলটি ক্যাশে করার অনুমতি দেয়৷
  • <body> এর শেষে স্ক্রিপ্ট লোড করুন defer সহ :সেরা ব্যবহারকারীর অভিজ্ঞতার জন্য, আপনার <script> রাখুন ক্লোজিং </body> এর ঠিক আগে ট্যাগ ট্যাগ করুন এবং defer যোগ করুন বৈশিষ্ট্য এটি নিশ্চিত করে যে আপনার পৃষ্ঠার বিষয়বস্তু জাভাস্ক্রিপ্ট দ্বারা অবরুদ্ধ না হয়ে দ্রুত লোড হয় এবং প্রদর্শিত হয়৷
    • ৷
  • পঠনযোগ্য কোড লিখুন :আপনার ভেরিয়েবল এবং ফাংশনের জন্য স্পষ্ট, বর্ণনামূলক নাম ব্যবহার করুন (যেমন, calculateTotalPrice calc এর পরিবর্তে ) মন্তব্য // ব্যবহার করুন আপনি কেন একটি কোড লিখেছেন তা ব্যাখ্যা করার জন্য, এটি কী করে তা নয়।
  • নিজেকে রিপিট করবেন না (DRY) :আপনি যদি একাধিক জায়গায় কোডের একই লাইন লিখতে দেখেন, সেই কোডটি একটি ফাংশনে মোড়ানো। তারপরে আপনি যখনই প্রয়োজন তখনই সেই ফাংশনটিকে কল করতে পারেন, আপনার কোডটি ছোট করে এবং আপডেট করা সহজ করে তোলে৷
    • ৷

কিছু সাধারণ সমস্যা কী এবং কীভাবে তাদের সমস্যা সমাধান করা যায়?

যখন আপনার স্ক্রিপ্ট কাজ করে না, আতঙ্কিত হবেন না! ব্রাউজারের বিকাশকারী সরঞ্জামগুলি আপনার সেরা বন্ধু৷ F12 টিপুন (অথবা পৃষ্ঠাটিতে ডান ক্লিক করুন এবং "পরিদর্শন" নির্বাচন করুন৷ ) এবং “কনসোল”-এ ক্লিক করুন ট্যাব বেশিরভাগ ত্রুটি এখানে লাল রঙে প্রদর্শিত হবে৷

৷

  • ত্রুটি:"শূন্যের বৈশিষ্ট্যগুলি পড়তে পারে না" বা "সংজ্ঞায়িত নয়"

    • অর্থ :আপনার জাভাস্ক্রিপ্ট একটি HTML উপাদান অ্যাক্সেস করার চেষ্টা করেছে যা এখনও লোড হয়নি৷
    • সমাধান :এর মানে প্রায় সবসময়ই আপনার <script> ট্যাগ <head>-এ আছে অথবা <body>-এ খুব বেশি . আপনার স্ক্রিপ্টটি <body> এর নীচে নিয়ে যান এবং ডিফার অ্যাট্রিবিউট যোগ করুন।

  • ত্রুটি:"অপরাধিত সিনট্যাক্স ত্রুটি"৷

    • অর্থ :আপনার কোডে একটি টাইপো আছে।
    • সমাধান :কনসোল সাধারণত আপনাকে একটি লাইন নম্বর দেয়। () অনুপস্থিত বন্ধনীর জন্য সেই লাইনটি ঘনিষ্ঠভাবে দেখুন , কোঁকড়া বন্ধনী {} , উদ্ধৃতি "" , অথবা অন্য টাইপো।

  • সমস্যা:স্ক্রিপ্ট চলছে না, কনসোলে কোনো ত্রুটি নেই।

    • অর্থ :আপনার HTML ফাইল সম্ভবত আপনার .js খুঁজে পাচ্ছে না ফাইল।
    • সমাধান :“নেটওয়ার্ক” চেক করুন বিকাশকারী সরঞ্জামগুলিতে ট্যাব। আপনি যদি আপনার স্ক্রিপ্ট ফাইলটি একটি 404 ত্রুটি সহ তালিকাভুক্ত দেখতে পান, তাহলে src-এ আপনার ফাইল পাথ বৈশিষ্ট্যটি ভুল। আপনার বানান এবং ফোল্ডারের গঠন দুইবার পরীক্ষা করুন (যেমন, <script src="js/script.js"></script> )।

  • সমস্যা:কোডটি চলে কিন্তু আমি যা আশা করি তা করে না।

    • অর্থ :এটি একটি যুক্তির ত্রুটি। সিনট্যাক্স সঠিক, কিন্তু ধাপগুলো ভুল।

    • সমাধান :console.log() ব্যবহার করুন ডিবাগ করতে বিভিন্ন পর্যায়ে ভেরিয়েবলের মান প্রিন্ট করতে এটিকে আপনার কোডে রাখুন। এটি আপনাকে যুক্তি খুঁজে বের করতে এবং ঠিক কোথায় ভুল হচ্ছে তা দেখতে সাহায্য করে।

      let userRole = 'guest';
console.log('User role before check:', userRole); // See what the value is
if (userIsAdmin) {
 userRole = 'admin';
}

প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQs)

1. আমার HTML ফাইলে জাভাস্ক্রিপ্ট যোগ করার সর্বোত্তম উপায় কি?

সর্বোত্তম উপায় হল একটি বাহ্যিক .js লিঙ্ক করা defer সহ ফাইল অ্যাট্রিবিউট, ক্লোজিং </body> এর ঠিক আগে স্ক্রিপ্ট ট্যাগ স্থাপন করা ট্যাগ (যেমন, <script src="path/to/script.js" defer></script> )।

2. আমার কি মাথায় বা শরীরে জাভাস্ক্রিপ্ট রাখা উচিত?

আপনার প্রায় সবসময় আপনার জাভাস্ক্রিপ্ট <script> রাখা উচিত <body>-এর একেবারে শেষে ট্যাগ বিভাগ, বন্ধ করার ঠিক আগে </body> ট্যাগ।

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

3. আমি কি একটি HTML ফাইলে একাধিক স্ক্রিপ্ট ট্যাগ যোগ করতে পারি?

হ্যাঁ, আপনি যতগুলি <script> অন্তর্ভুক্ত করতে পারেন৷ একটি একক HTML ফাইলে আপনার প্রয়োজন অনুযায়ী ট্যাগ করুন। ব্রাউজার তাদের ডকুমেন্টে যে ক্রমে প্রদর্শিত হবে সেই ক্রমে সেগুলি ডাউনলোড এবং কার্যকর করবে৷

৷

এটি সাধারণত তৃতীয় পক্ষের লাইব্রেরিগুলিকে আপনার কাস্টম স্ক্রিপ্টের আগে লোড করতে ব্যবহৃত হয় যা তাদের উপর নির্ভর করে৷

<body>
 <script src="library.js"></script> 
 
 <script src="my-app.js"></script> 
</body>

4. async এর মধ্যে প্রধান পার্থক্য কি এবং defer ?

উভয় বৈশিষ্ট্যই পৃষ্ঠাটিকে রেন্ডারিং থেকে ব্লক না করে স্ক্রিপ্ট লোড করে। মূল পার্থক্য হল defer গ্যারান্টি দেয় যে স্ক্রিপ্টগুলি ডকুমেন্টটি সম্পূর্ণভাবে পার্স করার পরে প্রদর্শিত ক্রম অনুসারে কার্যকর হবে, যখন async স্ক্রিপ্টটি ডাউনলোড হওয়ার সাথে সাথেই চালায়, যেটি যেকোনো ক্রমে হতে পারে।

5. কাজ করছে না এমন জাভাস্ক্রিপ্ট কিভাবে ডিবাগ করব?

ব্রাউজার ডেভেলপার টুলস খুলুন (F12), কনসোল চেক করুন ত্রুটি বার্তার জন্য ট্যাব, নেটওয়ার্ক ব্যবহার করুন ফাইল লোডিং যাচাই করতে ট্যাব, এবং console.log() যোগ করুন পরিবর্তনশীল মান ট্রেস করার জন্য বিবৃতি।

উপসংহার

এই টিউটোরিয়ালে, আপনি HTML এ জাভাস্ক্রিপ্ট যোগ করার তিনটি মূল পদ্ধতি শিখেছেন:<head>-এ ইনলাইন , <body>-এ ইনলাইন করুন , এবং একটি বাহ্যিক .js লিঙ্ক করা ফাইল আপনি রেন্ডার-ব্লকিং, ব্রাউজার ক্যাশিং এবং defer সহ কর্মক্ষমতার প্রভাবগুলিও অন্বেষণ করেছেন এবং async বৈশিষ্ট্যগুলি, বাস্তব-বিশ্বের উদাহরণ সহ এবং বিকাশকারী কনসোল ব্যবহার করে একটি সমস্যা সমাধানের নির্দেশিকা৷

আপনি এখন আপনার ব্যবহারের ক্ষেত্রে সঠিক জাভাস্ক্রিপ্ট লোডিং কৌশল বেছে নিতে পারেন, বহিরাগত ফাইলগুলি ব্যবহার করে পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য কোড লিখতে পারেন এবং ব্রাউজার বিকাশকারী সরঞ্জামগুলি ব্যবহার করে সাধারণ ত্রুটিগুলি ডিবাগ করতে পারেন৷ একটি বাহ্যিক .js ব্যবহার করা defer সহ ফাইল অ্যাট্রিবিউট হল বেশিরভাগ প্রোডাকশন ওয়েব প্রোজেক্টের জন্য প্রস্তাবিত পদ্ধতি।

আপনার জাভাস্ক্রিপ্ট দক্ষতা তৈরি করা চালিয়ে যেতে, নিম্নলিখিত টিউটোরিয়ালগুলি অন্বেষণ করুন:

  • কিভাবে জাভাস্ক্রিপ্ট ডেভেলপার কনসোল ব্যবহার করবেন
  • কিভাবে জাভাস্ক্রিপ্টে মন্তব্য লিখতে হয়
  • জাভাস্ক্রিপ্টে সিনট্যাক্স এবং কোড স্ট্রাকচার বোঝা
  • জাভাস্ক্রিপ্টে ভেরিয়েবল, স্কোপ এবং উত্তোলন বোঝা

জাভাস্ক্রিপ্ট ইন্টিগ্রেশন আয়ত্ত করা:এইচটিএমএল পারফরম্যান্সের জন্য সেরা অনুশীলন এই ক্রিয়েটিভ লাইসেন্সের অধীনে কাজ করে" অ্যাট্রিবিউশন-অবাণিজ্যিক- শেয়ারঅ্যালাইক 4.0 আন্তর্জাতিক লাইসেন্স।


ত্রিভুজ
ত্রিভুজ

  1. রুবি ব্যতিক্রম হ্যান্ডলিং মাস্টারিং:একটি ব্যবহারিক গাইড

  2. গ্রেড বই চ্যালেঞ্জ জাভাস্ক্রিপ্ট

  3. কিভাবে কয়েক সেকেন্ড পরে একটি Android বিজ্ঞপ্তি সাফ করবেন?

  4. প্রতিক্রিয়াশীল ব্যবহার করে আপনার অ্যাপে স্টাইলিং বা সিএসএস কীভাবে যুক্ত করবেন?