Embedding Scripts in HTML Documents
JavaScript execution can be triggered by placing code directly within markup or by referencing external files. Inline scripts execute immediately during the parsing phase, whereas external references enhance file organization and leverage browser caching.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Placement Demo</title>
</head>
<body>
<!-- Direct inline implementation -->
<script>
window.alert("Execution begins via inline block");
</script>
<!-- External file linkage -->
<script src="app.js"></script>
</body>
</html>
Standard Output Channels
Three primary APIs handle data presentation across different interfaces. Selection depends on whether the goal is user notification, DOM manipulation, or debugging.
| API | Functionality |
|---|---|
window.alert() |
Opens a blocking modal dialog with a specified message |
document.write() |
Appends content too the current document stream before page load completes |
console.log() |
Prints diagnostic traces to the developer tools console |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data Output</title>
</head>
<body>
<script>
// User-facing popup
window.alert("Notification dispatched");
// Stream injection into body
document.write("<h2>Generated heading injected</h2>");
// Development trace
console.log("Runtime diagnostic captured");
</script>
</body>
</html>
Variable Storage and Scoping Rules
The engine employs dynamic typing, resolving value categories at runtime rather than through explicit declaration. Allocation keywords dictate visibility boundaries and mutation constraints.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Storage & Scope</title>
</head>
<body>
<script>
// 'var' attaches to function or global scope
var sessionCount = 100;
sessionCount = "active_session";
var sessionCount = 250; // Permits redeclaration
{
// 'let' confines visibility to lexical block
let maxAttempts = 3;
// var maxAttempts = 4; // Triggers SyntaxError on repeat
}
// console.log(maxAttempts); // ReferenceError outside block
// 'const' locks binding reference after initialization
const API_ENDPOINT = "https://example.com/api";
// API_ENDPOINT = "https://dev.example.com/api"; // TypeError
</script>
</body>
</html>
Primitive Types and Runtime Inspection
Core language values fall into distinct categories. The typeof operator returns a lowercase string identifier for validation purposes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Type Verification</title>
</head>
<body>
<script>
// Numeric representations (integers & decimals)
const portNumber = 8080;
const latency = 0.45;
console.log(typeof portNumber); // number
console.log(typeof latency); // number
// Textual sequences
const apiKey = "sk_live_abc123";
const timeZone = "UTC+5";
console.log(typeof apiKey); // string
console.log(typeof timeZone); // string
// Logical operators
const isVerified = true;
const isOffline = false;
console.log(typeof isVerified); // boolean
console.log(typeof isOffline); // boolean
// Explicit empty state
const fallbackValue = null;
console.log(typeof fallbackValue); // object (legacy engine behavior)
// Unassigned identifier tracking
let pendingRequest;
console.log(typeof pendingRequest); // undefined
</script>
</body>
</html>