Setting Up JavaScript - "JavaScript" in html file
Where to put <script> tag in html head/`body
HTML এর মধ্যে JavaScript চালানোর জন্য <script> ট্যাগ ব্যবহার করা হয়। JavaScript কোড আমরা লিখতে পারি দুইভাবে:
- Inline JavaScript (HTML ফাইলের ভেতরেই কোড)
- External JavaScript (আলাদা
.jsফাইলে রেখেsrcদিয়ে লিঙ্ক করা)
Script Tag কোথায় বসাবো?
Option 1: <head> এর ভেতরে
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>সমস্যা কী?
- যখন browser HTML পড়ে
<script>দেখে, তখন সেটা লোড এবং চালানো শুরু করে। - JS ফাইল লোড হওয়া পর্যন্ত HTML parsing বন্ধ থাকে। এটাকে বলা হয় Render Blocking।
- যদি JS DOM-এ কিছু access করতে চায় (যেমন document.getElementById) — তখন সেটা কাজ করবে না কারণ HTML এখনো পুরো লোড হয়নি।
ব্যবহার করবেন না যদি DOM access করতে হয়!
Option 2: <body> এর শেষে (before </body>)
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<script src="script.js"></script>
</body>
</html>এটা সবচেয়ে জনপ্রিয় ও সহজ উপায়
- HTML আগে parse হয়, তারপর JS চলে
- DOM পুরো available থাকে
- JS সব element access করতে পারে
- No render blocking → faster page load
async vs defer: কী কাজ করে কীভাবে?
<script> ট্যাগে async বা defer attribute দিলে, JavaScript execution control করা যায়।
async
<script src="script.js" async></script>কিভাবে কাজ করে?
- Script HTML এর সাথে সাথে লোড হয় (non-blocking)
- কিন্তু লোড হতেই সাথে সাথে execute হয়
- DOM এখনও পুরো load না হলেও JS চলে যেতে পারে
সমস্যাঃ
- যদি DOM element access করে, তখন error আসতে পারে
- multiple async script থাকলে execution order এলোমেলো হতে পারে
defer
<script src="script.js" defer></script>কিভাবে কাজ করে?
- HTML parse করার সময়েই script লোড হয় (non-blocking)
- কিন্তু execute করে DOM parse শেষ হওয়ার পরেই
- multiple defer script থাকলে যে order এ লেখা হয়েছে, সেই order এ চলে
Best practice:
- নিজের JavaScript file → defer ব্যবহার করো
- DOM access করতে হলে defer always safe
তুলনামূলক টেবিল: async vs defer
| Feature | async | defer |
|---|---|---|
| Load behavior | HTML parse এর সাথে সাথে লোড হয় | HTML parse এর সাথে সাথে লোড হয় |
| Execute behavior | Load হওয়া মাত্র execute হয় | DOM parse শেষ হলে execute হয় |
| Execution Order | যেভাবেই লোড হয়, সেইভাবে চলে | HTML এ যেভাবে লেখা, সেইভাবে চলে |
| DOM ready time | DOM এর আগে execute হতে পারে | DOM parse শেষ হওয়ার পর চলে |
| Use Case | Third-party script, ads, tracking | Page এর নিজস্ব scripts |
Visual Diagram: Execution Flow
No attribute:
HTML -----[BLOCK]-- JS --[RESUME]--> DOM
async:
HTML -----⟶⟶ [JS loaded & executed immediately] ⟶⟶ DOM continues
defer:
HTML ⟶⟶ [JS loaded in background] ⟶⟶ DOM parsed completely ⟶⟶ [JS executed in order]কখন কী ব্যবহার করবো?
| Scenario | Suggested Script Setup |
|---|---|
| Simple demo/test project | <script> at end of <body> |
| DOM access needed before running script | defer (in <head>) |
| Tracking or analytics script (e.g., Google) | async |
| Multiple dependent JS files | defer maintains order |
| Using modern frameworks like React/Vue | Usually handled via build tools (Webpack) |
Bonus: Inline Script + DOM Ready
যদি inline JS লেখো এবং <head> এ রাখতে চাও, তাহলে DOM ready হবার event শুনতে হবে:
<script>
document.addEventListener("DOMContentLoaded", function () {
// All DOM elements are ready
const heading = document.querySelector("h1");
heading.textContent = "Hello from JS!";
});
</script>Best Practices Summary
- Use
<script src="app.js" defer></script>inside<head>→ most modern and safe - Or, use
<script>just before closing</body>tag - Avoid placing blocking
<script>inside<head>unless absolutely necessary - Use async only for third-party independent scripts
Final Example: Best Setup for Beginners
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Best JS Setup</title>
<script src="main.js" defer></script>
</head>
<body>
<h1>Welcome to JavaScript</h1>
</body>
</html>// main.js
document.addEventListener("DOMContentLoaded", () => {
const h1 = document.querySelector("h1");
h1.textContent = "JavaScript is Working!";
});