HTML JavaScript
JavaScript adds interactivity to HTML — handling clicks, fetching data, updating the page without a reload. You attach it with the <script> element.
Three ways to include script
| Pattern | Example | Best for |
|---|---|---|
| External | <script src="/app.js"></script> | Production — shared across pages, cached by the browser. |
| Internal | <script>…</script> | Page-specific code or quick prototypes. |
| Inline handler | <button onclick="…"> | Avoid in production — mixes structure and behaviour. |
Loading order: async vs defer
| Attribute | Downloads | Runs |
|---|---|---|
| (default) | Blocks parsing. | Immediately, in order. |
async | In parallel. | As soon as it's ready — order is not guaranteed. |
defer | In parallel. | After the page is parsed, in order. Best default. |
Tip: Put
<script defer src="…"> in the <head>. The browser downloads in parallel and runs in order, so you get fast loads without surprises.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript</title>
</head>
<body>
<h1>HTML JavaScript</h1>
<p>This is a demo page for the "HTML JavaScript" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Load an external script file.
<script
="app.js"></script>
Three letters. Holds the URL of the script.
Discussion
Loading…