Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Write JavaScript directly inside HTML tags using event attributes.
Use <script> tags inside the HTML file to keep code organized.
Link to separate .js files for better maintainability and reusability.
JavaScript code written directly inside HTML event attributes like onclick, onload, etc.
JavaScript code written directly in HTML event attributes
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Inline Example</title>
6</head>
7<body>
8 <h1>Click the button</h1>
9 <button onclick="alert('Hello!')">Click Me</button>
10</body>
11</html>Where to place your <script> tags
Loads before page content
Recommended ✅
Placing scripts before </body> ensures all HTML elements load first, so your JavaScript can access them immediately.
JavaScript code organized in <script> tags within the HTML file
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Internal JavaScript</title>
6 <script>
7 function greet() {
8 alert('Hello from internal script!');
9 }
10 </script>
11</head>
12<body>
13 <h1>Internal Script Example</h1>
14 <button onclick="greet()">Click Me</button>
15</body>
16</html>Link separate JS files with src attribute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>External JavaScript</title> <script src="app.js" defer></script> </head> <body> <h1 id="title">Welcome</h1> <button id="btn">Click Me</button> </body> </html>
// app.js
console.log('External JS loaded!');
const button = document.getElementById('btn');
const title = document.getElementById('title');
button.addEventListener('click', () => {
title.textContent = 'Hello from external JS!';
title.style.color = 'green';
});Interactive Example
// app.js
console.log('External JS loaded!');
const button = document.getElementById('btn');
const title = document.getElementById('title');
button.addEventListener('click', () => {
title.textContent = 'Hello from external JS!';
title.style.color = 'green';
});<div class="demo-container">
<header>
<h1 id="title">Welcome to External JS Demo</h1>
<p class="subtitle">Click the button to see JavaScript change the page</p>
</header>
<main>
<button id="btn" class="action-btn">Click Me!</button>
</main>
</div>Use the same JS file across multiple HTML pages
Easier to find, edit, and debug your code
Browsers cache .js files for faster page loads
Downloads in parallel but waits to execute until HTML is fully parsed
Downloads and executes as soon as ready (order not guaranteed)
Blocks HTML parsing until script downloads and executes
defer for scripts that manipulate the DOMasync for independent scripts (analytics, ads)ES6 modules enable import/export
No import/export support
Modern import/export syntax
export function greet(name) {return `Hello, $${name}`;}
import { greet } from './utils.js'; console.log(greet('World'));
No Global Scope
Variables stay private
Auto Strict Mode
Catches common errors
Deferred by Default
No blocking
Fallback for browsers that don't support ES6 modules
Enable CORS for scripts from other domains
Verify script hasn't been tampered with (security)
Control what referrer info is sent
integrity and crossorigin attributes to ensure the script hasn't been modified maliciously.| Attribute | When to Use | Blocks HTML? | Execution Order |
|---|---|---|---|
| defer | Scripts that need DOM | No ✅ | Guaranteed order |
| async | Independent scripts | No ✅ | Random order |
| type="module" | Modern ES6 modules | No ✅ | Deferred by default |
| none | Legacy code | Yes ❌ | Immediate |
defer to script tagstype="module" for modern code