Your First Script — console.log to the DOM

script ট্যাগ থেকে console — এবং প্রথম DOM লেখা

~25 min Beginner 6 practice problems Live runner

1. The `<script>` Tag

JavaScript enters an HTML page through a <script> tag. There are two ways:

Inline (small one-offs)

<!DOCTYPE html>
<html>
<body>
  <h1 id="title">Hello</h1>
  <script>
    console.log("Page is alive!");
    document.getElementById("title").textContent = "হ্যালো!";
  </script>
</body>
</html>

External (real projects)

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

প্রতিটি HTML page-এ <script> tag-এর মাধ্যমে JavaScript যোগ করা হয়। ছোট কোড inline লেখা যায়, বড় কোড আলাদা .js ফাইলে রেখে src attribute দিয়ে link করা ভালো অভ্যাস।

2. Where to Place the `<script>` Tag

Placement matters because the browser parses HTML top-to-bottom. If your script tries to touch an element that hasn't been parsed yet, it crashes.

Placement	Behaviour	When to use
`<head>`	Blocks rendering until script downloads + runs. DOM not yet built.	Almost never (only for tiny critical config)
End of `<body>`	HTML is fully parsed first; script runs at the end.	The classic safe choice
`<head>` with `defer`	Downloads in parallel; runs after DOM is fully parsed; preserves order.	Modern best practice
`<head>` with `async`	Downloads in parallel; runs as soon as ready (out of order!).	Independent scripts (analytics, ads)

defer দিলে — script download হবে background-এ, কিন্তু চলবে DOM সম্পূর্ণ parse হওয়ার পর (এবং একাধিক script থাকলে order বজায় থাকবে)। async দিলে — যেটা আগে download হয় সেটা আগে চলে। আজকের দিনে defer বেশিরভাগ ক্ষেত্রে সঠিক উত্তর।

Figure 3.1 — green = HTML parsing continues, red = blocked. defer wins.

3. The `console` Family

The browser's console object is your debugging best friend. Beyond log, several variants help you communicate intent.

console-family.js

console.log("Plain message");
console.info("Informational");
console.warn("Something looks off");
console.error("This is bad");

const people = [
    { name: "Arif",   age: 22 },
    { name: "Nusrat", age: 25 },
    { name: "Zahid",  age: 20 },
];
console.table(people);

console.log("Multiple", "args", "join with spaces");
console.log(`Templates: ${2 + 2}`);

4. Your First DOM Write

The DOM (Document Object Model) is a live object representing the page. JavaScript edits it directly — and the browser repaints.

DOM হলো page-এর live object representation। JavaScript সেটিকে পরিবর্তন করলেই browser আবার render করে। এটাই dynamic web-এর হৃৎস্পন্দন।

The simplest writes:

document.title = "নতুন title";
document.body.style.background = "#fde047";
document.getElementById("greeting").textContent = "হ্যালো বাংলাদেশ!";
document.getElementById("greeting").innerHTML = "<em>Hello</em>";

Below is a runnable simulation — we mock the DOM with a plain JS object so you can see the same flow inside this in-browser sandbox.

dom-mock.js

// Mock DOM — same shape, no real browser needed.
const document = {
    title: "Old Title",
    body:  { style: { background: "white" } },
    elements: { greeting: { textContent: "" } },
    getElementById(id) { return this.elements[id]; }
};

document.title = "নতুন title";
document.body.style.background = "#fde047";
document.getElementById("greeting").textContent = "হ্যালো বাংলাদেশ!";

console.log("title       :", document.title);
console.log("bg colour   :", document.body.style.background);
console.log("#greeting   :", document.getElementById("greeting").textContent);

textContent vs innerHTML Use textContent for plain text — it is safe. Use innerHTML only when you control the HTML; user-supplied strings inside innerHTML = XSS vulnerability.

5. Common First-Day Mistakes

⚠️ Mistakes to avoid

Console.Log() — case-sensitive, must be lowercase
Forgetting the closing </script>
Putting script in <head> without defer — DOM is empty
Using document.write() after page loads — wipes the page
Mixing " and ' inside the same string without escaping

✅ Habits to adopt

One .js file per feature, loaded with defer
Always check the Console tab for red errors
Use template literals for any string with a variable
Treat warnings as errors
Save and reload often — keep iterations small

6. Glossary (শব্দকোষ)

Term	Meaning	বাংলায়
`<script>`	HTML tag that loads or contains JavaScript.	JavaScript কোড embed বা link করার HTML tag।
`defer`	Download in parallel; run after DOM is fully parsed; preserves order.	Background-এ download হবে কিন্তু DOM তৈরি হওয়ার পর order বজায় রেখে চলবে।
`async`	Download in parallel; run as soon as ready; no order guarantee.	আগে download হলে আগে চলবে — order জরুরি নয়।
DOM	Document Object Model — live tree representing the page.	Page-এর live tree representation যাকে JS পরিবর্তন করতে পারে।
`console.log`	Print a value to the DevTools console.	DevTools console-এ value প্রিন্ট করে।
`textContent`	Sets/reads plain text — XSS-safe.	শুধু plain text — XSS-নিরাপদ।
`innerHTML`	Sets/reads HTML — parses tags; XSS-risky with user input.	HTML markup — user input দিলে XSS-এর ঝুঁকি।
XSS	Cross-Site Scripting — injecting malicious JS via user content.	User-এর data দিয়ে malicious JS inject করার আক্রমণ।

মূল কথা: External JS-এ সবসময় defer ব্যবহার করুন — এতে DOM ready থাকে এবং একাধিক script নির্দিষ্ট order-এ চলে। User-এর input কখনোই innerHTML-এ বসাবেন না — সেক্ষেত্রে textContent safe। Console family (log/info/warn/error/table) আপনার debugging-এর সঙ্গী।

7. Practice Problems

Write a script that logs three differently styled messages: a normal log, a warning, and an error.

তিনটি ভিন্ন ধরণের লগ লিখুন — normal, warning, error।
✨ Show Answer (উত্তর দেখুন)
ans1.js
```
console.log("Everything is fine");
console.warn("This is a yellow warning");
console.error("This is a red error");
```
Use console.table to show three students with their names and marks.

তিনজন ছাত্রের নাম ও marks console.table দিয়ে দেখান।
✨ Show Answer (উত্তর দেখুন)
ans2.js
```
const students = [
    { name: "Rahim",  marks: 82 },
    { name: "Karim",  marks: 71 },
    { name: "Sumaiya", marks: 95 },
];
console.table(students);
```
In two sentences, explain when to choose defer vs async for a script tag.

কখন defer এবং কখন async ব্যবহার করবেন — দুই বাক্যে ব্যাখ্যা করুন।

✨ Show Answer (উত্তর দেখুন)

Answer: Use defer when the script needs the DOM ready and must run in source order — this covers nearly every app script. Use async only for fully independent scripts (analytics, ads, third-party widgets) that can run as soon as they download, in any order.

defer ব্যবহার করুন যখন script-কে DOM পরে চলতে হবে এবং একাধিক script নির্দিষ্ট order-এ চলা দরকার (অর্থাৎ সাধারণ app code)। async ব্যবহার করুন যখন script সম্পূর্ণ স্বাধীন — যেমন analytics, ads — order জরুরি নয়।
Write code that simulates updating document.title to a new value and logs both the old and the new title.

document.title-কে পরিবর্তন করে আগের ও পরের value প্রিন্ট করুন।
✨ Show Answer (উত্তর দেখুন)
ans4.js
```
const document = { title: "Old Title" };
console.log(`Before: ${document.title}`);
document.title = "হ্যালো বাংলাদেশ!";
console.log(`After : ${document.title}`);
```
Why does document.write() wipe the page if called after the page has loaded? Explain in 2 sentences.

Page load হওয়ার পর document.write() কেন পুরো page মুছে দেয়? দুই বাক্যে ব্যাখ্যা করুন।

✨ Show Answer (উত্তর দেখুন)

Answer: document.write() writes into the current parser stream — while the page is still loading it injects markup at the cursor. Once the document has finished parsing, calling it implicitly opens a new stream which clears the existing document, replacing the page with whatever you wrote.

document.write() parser-এর চলমান stream-এ লেখে। page parse হওয়ার পর একে call করলে নতুন stream তৈরি হয় এবং পুরো document মুছে গিয়ে শুধু লেখা টুকু থাকে।
Build a tiny mock-DOM example: store three div elements as objects in a map and update the second one's text.

তিনটি div-কে object হিসেবে রেখে দ্বিতীয়টির লেখা পরিবর্তন করুন।
✨ Show Answer (উত্তর দেখুন)
ans6.js
```
const divs = {
    a: { text: "first" },
    b: { text: "second" },
    c: { text: "third" },
};
divs.b.text = "UPDATED";
console.log(divs);
```

Summary — Module 03

The <script> tag is JavaScript's only way into HTML. Use defer on external scripts so they run after the DOM is ready while still loading in parallel. The console family (log, warn, error, table) is your debugging companion. Writing to the DOM is as simple as element.textContent = "..." — but always prefer textContent over innerHTML when in doubt.

JavaScript HTML-এ ঢোকে শুধুমাত্র <script> tag দিয়ে। External script-এ defer ব্যবহার করুন। console family হলো debugging-এর সঙ্গী। DOM-এ লেখা মানে শুধু element.textContent = "..." — সবসময় textContent safe।

Next Module → Values, Types & The Coercion Trap — JS-এর সবচেয়ে বিভ্রান্তিকর জায়গা।

L02: Setup Next: Values & Types

1. The <script> Tag

2. Where to Place the <script> Tag

3. The console Family

4. Your First DOM Write

5. Common First-Day Mistakes

⚠️ Mistakes to avoid

✅ Habits to adopt

6. Glossary (শব্দকোষ)

7. Practice Problems

Summary — Module 03

1. The `<script>` Tag

2. Where to Place the `<script>` Tag

3. The `console` Family