JavaScript Tutorial
JavaScript Where To
Put script in the page, at the end of body, or in a .js file. StudyGrid runs it in /javascript/try.
Three places for a script
The browser runs JavaScript from a <script> tag. You can write the code in the page, or point the tag at a .js file with src.
Where you put the tag matters. The browser reads HTML from top to bottom. A script that looks for an element before that element exists will fail.
| Place | When it runs |
|---|---|
| Inline in the page | As soon as the browser reaches the tag |
Just before </body> | After the page elements exist |
A .js file with src | When that file loads |
Inline script
Put the code between <script> and </script>. The browser does not show that text on the page. It runs it as JavaScript.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline script</title>
</head>
<body>
<p id="status">Ready.</p>
<script>
console.log("The script ran.");
document.getElementById("status").textContent = "The script ran.";
</script>
</body>
</html>Click Try it in JavaScript under the example. That opens /javascript/try — a live page on the right and a console under it.
Script at the end of body
Put the tag just before </body>. By then the headings, buttons, and paragraphs are already in the document. Your script can find them by id.
This is the default for this tutorial. Short examples stay easy to read. The page does not wait on a script that sits in the head.
Example
<body>
<h1 id="title">Waiting</h1>
<p>The heading exists before the script runs.</p>
<script>
document.getElementById("title").textContent = "Ready.";
</script>
</body>Why not in the head without defer
A script in <head> runs before the body is parsed. If it callsgetElementById, the element is still missing. The lookup returns null, and the next line throws.
Example
<head>
<script>
// Too early: #title is not in the document yet.
document.getElementById("title").textContent = "Too soon.";
</script>
</head>
<body>
<h1 id="title">Hello</h1>
</body>Add defer if the tag must live in the head. defer waits until the HTML is parsed, then runs the script in order. Without defer or async, a script in the head also blocks the rest of the page from drawing.
Do not put a DOM script in the head unless you add defer. End of body is simpler for beginners.
A .js file with src
Move the code into its own file. Point at it with src. Leave the tag empty. The browser loads that file and runs it.
Example
<!-- index.html -->
<body>
<p id="status">Ready.</p>
<script src="app.js"></script>
</body>
<!-- app.js -->
console.log("Loaded from app.js");
document.getElementById("status").textContent = "Loaded from app.js";One file can serve many pages. The HTML stays markup. The script stays logic. Keep the src tag at the end of body, or add defer if you put it in the head.
In StudyGrid, paste the HTML and the script together in /javascript/try. The editor does not load a separate app.js from disk. Inline script is the way to try a file example here.
defer and async
External scripts can wait or race. Use these attributes only on tags with src. They do nothing useful on inline script.
| Attribute | What it does |
|---|---|
| none | Stops parsing, runs now, then continues |
defer | Downloads in the background, runs after HTML is parsed, in order |
async | Downloads in the background, runs as soon as it is ready, order not guaranteed |
Prefer defer when scripts depend on the page or on each other. async is for independent files, such as an analytics snippet that does not touch your elements.
What to use in this tutorial
Put a <script> at the end of <body>. Find elements by id. Log to the console when you want a value you can inspect without changing the page.
Next: three ways to show a result — console.log, the page, and alert.