Mixed Content Examples
HTML with Embedded JavaScript
JavaScript code inside <script> tags is highlighted with JavaScript syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Page</title>
<script>
// This JavaScript code is highlighted!
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('#myButton');
const counter = { count: 0 };
button.addEventListener('click', () => {
counter.count++;
console.log(`Clicked ${counter.count} times`);
// Update the UI
button.textContent = `Clicks: ${counter.count}`;
});
});
</script>
</head>
<body>
<h1>Click Counter</h1>
<button id="myButton">Click Me!</button>
</body>
</html>
Multiple Script Blocks
Multiple <script> tags with different content:
<!DOCTYPE html>
<html>
<head>
<!-- External script -->
<script src="https://cdn.example.com/library.js"></script>
<!-- Module script -->
<script type="module">
import { helper } from './utils.js';
class App {
constructor() {
this.data = [];
}
async init() {
const response = await fetch('/api/data');
this.data = await response.json();
this.render();
}
}
const app = new App();
app.init();
</script>
<!-- Inline event handler (old style) -->
<script>
function handleClick(event) {
alert('Button clicked!');
return false;
}
</script>
</head>
<body>
<button onclick="handleClick(event)">Old Style Handler</button>
</body>
</html>
ES6 Modules in HTML
Modern JavaScript modules with imports:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES Module Example</title>
</head>
<body>
<div id="app"></div>
<script type="module">
// Dynamic imports
const { createApp } = await import('./framework.js');
// App component
const app = createApp({
data() {
return {
message: 'Hello, World!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
},
template: `
<div>
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
`
});
app.mount('#app');
</script>
</body>
</html>
Web Components
Custom elements with JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Components</title>
<script>
class MyCounter extends HTMLElement {
#count = 0;
#shadow;
constructor() {
super();
this.#shadow = this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
this.#shadow.querySelector('button').addEventListener('click', () => {
this.#count++;
this.render();
});
}
render() {
this.#shadow.innerHTML = `
<style>
:host { display: block; padding: 1rem; }
button { padding: 0.5rem 1rem; }
</style>
<div>
<p>Count: ${this.#count}</p>
<button>Increment</button>
</div>
`;
}
}
customElements.define('my-counter', MyCounter);
</script>
</head>
<body>
<h1>Custom Counter Element</h1>
<my-counter></my-counter>
<my-counter></my-counter>
</body>
</html>
Async Script Loading
Different script loading strategies:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Loading Strategies</title>
<!-- Regular blocking script -->
<script src="critical.js"></script>
<!-- Async: Download in parallel, execute ASAP -->
<script async src="analytics.js"></script>
<!-- Defer: Download in parallel, execute after DOM ready -->
<script defer src="app.js"></script>
<!-- Module: Always deferred by default -->
<script type="module" src="main.js"></script>
<!-- Inline with initialization -->
<script>
window.APP_CONFIG = {
apiUrl: 'https://api.example.com',
version: '1.0.0',
features: {
analytics: true,
darkMode: true
}
};
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Template Strings in HTML
Using template literals for dynamic content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Templates</title>
</head>
<body>
<div id="user-list"></div>
<script>
const users = [
{ id: 1, name: 'Alice', role: 'Admin' },
{ id: 2, name: 'Bob', role: 'User' },
{ id: 3, name: 'Charlie', role: 'Moderator' }
];
function renderUsers(users) {
return users.map(user => `
<div class="user-card" data-user-id="${user.id}">
<h3>${user.name}</h3>
<span class="badge ${user.role.toLowerCase()}">
${user.role}
</span>
<button onclick="editUser(${user.id})">Edit</button>
</div>
`).join('');
}
document.getElementById('user-list').innerHTML = renderUsers(users);
function editUser(id) {
console.log(`Editing user ${id}`);
}
</script>
</body>
</html>