Chapter 1: JS Introduction & Document Setup
Welcome to JavaScript! In this foundational chapter, you'll discover how JavaScript powers the modern
interactive web, learn where to place scripts inside HTML, master the difference between async and
defer, and harness the browser Developer Console.
1.1 What is JavaScript & Why Learn It?
The Web is built on three foundational technologies that work together in harmony:
JavaScript (JS) is a lightweight, cross-platform, interpreted programming language. While initially created to bring web pages alive in Netscape Navigator (1995), modern JavaScript runs everywhere: in web browsers, on servers via Node.js, on microcontrollers, and in mobile apps.
Key Fact
JavaScript is the ONLY programming language natively supported by all web browsers without requiring any plugins or extra installations!
Live Section Demo: What Can JavaScript Do?
Click the buttons below to see JavaScript dynamically alter this live web preview in real-time:
Welcome to AICodeLab JavaScript!
This text and background can be altered dynamically using JavaScript code.
1.2 Where To Place JavaScript in HTML
JavaScript code is embedded inside HTML documents using the <script> element. There are three
primary ways to include JavaScript:
- Internal JavaScript: Written directly inside a
<script>block in the HTML document. - External JavaScript: Written in a separate
.jsfile and linked using<script src="script.js">. - Inline JavaScript: Placed directly inside an HTML event attribute like
onclick="...".
Example — Internal JavaScript
Placing JS directly inside the HTML file using the <script> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First JS Page</title>
</head>
<body>
<h1 id="greeting">Hello World!</h1>
<script>
// Internal JavaScript Code
document.getElementById("greeting").textContent = "Hello from JavaScript!";
console.log("Internal script executed successfully!");
</script>
</body>
</html>Example — External JavaScript (Recommended Standard)
Linking a separate app.js file keeps HTML structural and JS logical:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External JS Link</title>
<!-- Link to external JavaScript file -->
<script src="app.js" defer></script>
</head>
<body>
<h1>External Script Demo</h1>
</body>
</html>
// app.js (Separate File)
console.log("App loaded from external file!");
document.body.style.backgroundColor = "#0f172a";Advantages of External Scripts
- Separation of Concerns: Keeps HTML structure separate from JavaScript logic.
- Reusability: The same
.jsfile can be linked to multiple HTML pages. - Performance & Caching: Web browsers cache external JS files, making page loads faster.
1.3 Script Placement: Head vs Body & async / defer
Where you place your <script> tag and which loading attributes you use significantly impacts
website loading performance and DOM parsing behavior.
Default Script
Pauses HTML parsing immediately, fetches the script, executes it, and then resumes parsing. Can cause page slowdowns.
async Attribute
Downloads script in background while HTML parses. Executes immediately as soon as downloaded (interrupts HTML parsing).
defer Attribute
Downloads script in background without interrupting HTML. Executes ONLY after the entire HTML document is parsed. Best practice!
1.4 The Browser Developer Console
Every modern web browser comes equipped with built-in **Developer Tools (DevTools)**. The **Console** tab allows developers to inspect errors, test JavaScript commands live, and output diagnostic messages.
Example — Console Logging Methods
<script>
// Output general debugging information
console.log("User logged in successfully!", { userId: 104, role: "admin" });
// Output a yellow warning message
console.warn("API Deprecation: fetchUser() will be removed in v2.0");
// Output a red error message with stack trace
console.error("Network Error: Failed to fetch data from server!");
// Output tabular data as a clean grid
console.table([
{ name: "Alice", role: "Developer", status: "Active" },
{ name: "Bob", role: "Designer", status: "Offline" }
]);
</script>1.5 Hands-on Challenge: Build Your First Interactive Web Component!
Build Your First Interactive Web Component!
Challenge Question & Task
Task: You are given an HTML page with a heading <h2 id="status" style="color: #ef4444;">Status: Offline</h2> and a button. Write a JavaScript function and attach it to the button's onclick handler so that when clicked:
- The text inside
<h2 id="status">changes to"Status: Online 🚀". - The color of the heading changes from Red (
#ef4444) to Green (#10b981). - A message is logged to the browser console confirming the update:
console.log("Status updated to Online!");
Question / Starter Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Status Toggle Challenge</title>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #0f172a; color: #f8fafc; }
.card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; max-width: 480px; }
h2#status { margin-top: 0; }
.btn { background: #10b981; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }
</style>
</head>
<body>
<div class="card">
<h2 id="status" style="color: #ef4444;">Status: Offline</h2>
<!-- TODO: Add onclick attribute or JS event listener -->
<button class="btn" onclick="goOnline()">Go Online</button>
</div>
<script>
// TODO: Define the goOnline() function to change text & color!
function goOnline() {
// Your code here...
}
</script>
</body>
</html>document.getElementById("status") to select the element, then set
element.textContent = "Status: Online 🚀" and element.style.color = "#10b981"
inside the goOnline() function!
Solution Code
Here is the complete working solution using HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Status Toggle Solution</title>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #0f172a; color: #f8fafc; }
.status-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; max-width: 480px; }
h2#status { margin-top: 0; transition: color 0.3s ease; }
.btn-toggle { background: #10b981; color: #ffffff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; }
.btn-toggle:hover { background: #059669; }
</style>
</head>
<body>
<div class="status-card">
<h2 id="status" style="color: #ef4444;">Status: Offline</h2>
<button class="btn-toggle" onclick="goOnline()">Go Online</button>
</div>
<script>
function goOnline() {
const statusEl = document.getElementById("status");
statusEl.textContent = "Status: Online 🚀";
statusEl.style.color = "#10b981";
console.log("Status updated to Online!");
}
</script>
</body>
</html>