Hello, world!
This part of the course is about the JavaScript language itself — the syntax and ideas that are the same wherever your code runs.
But to run anything, you need somewhere to run it. Since you’re reading in a browser, that’s the most convenient place to start, so our examples run there. We’ll lean on browser-only commands like alert as little as possible, so that if your real target is another environment — Node.js, say — you’re not learning throwaway details. The browser-specific side of things gets its own dedicated part later.
On the server, running a script is a one-liner: save it as my.js and type node my.js. In the browser you first have to attach the script to a page.
The “script” tag
You can drop JavaScript almost anywhere in an HTML document by wrapping it in a <script> tag. When the browser parses the page and reaches that tag, it runs the code inside immediately.
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>
Load that page and a dialog pops up saying Hello, world! — the browser hit the <script> block, executed alert(...), and only then carried on to render the paragraph below it. That “run it the moment I see it” behaviour matters more than it looks; we’ll come back to it when we discuss page loading.
Modern markup
The <script> tag has a handful of attributes you’ll only ever meet in old code. Knowing them mostly helps you recognise something as ancient.
- The
typeattribute:<script type=…> The old HTML4 standard insisted every script declare a
type, almost alwaystype="text/javascript". Modern HTML dropped that requirement and quietly repurposed the attribute: todaytypeis how you opt a script into being a module (type="module") — a more advanced topic we cover in its own chapter. For plain scripts, leave it off.
- The
languageattribute:<script language=…> This once declared which scripting language you were using. Since JavaScript is the only one browsers run, it’s pure noise now. Never write it.
- Comment wrappers around scripts
In genuinely old material you may see script contents wrapped in an HTML comment:
<script type="text/javascript"><!-- ... //--></script>This was a trick to hide the code from prehistoric browsers that couldn’t understand
<script>at all — they’d treat the whole thing as a comment instead of printing it as text. No browser from the last decade-and-a-half has that problem, so if you spot this pattern, you’re looking at very old code.
External scripts
Once you have more than a few lines, you’ll want the code in its own file rather than crammed into the HTML. You attach a file with the src attribute:
<script src="/path/to/script.js"></script>
The path /path/to/script.js is absolute — measured from the site root. You can also give a relative path from the current page: src="script.js" and src="./script.js" both mean “a file named script.js sitting next to this page.” And a full URL works too, which is how you’d pull in a library from a CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Need several files? Use several tags — they run top to bottom:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
Summary
- A
<script>tag drops JavaScript into a page, and it runs the instant the browser reaches it. - The
typeandlanguageattributes are legacy — you don’t need them (excepttype="module", much later). - To load code from a file:
<script src="path/to/script.js"></script>, and prefer this for anything non-trivial so the browser can cache it.
There’s a great deal more to how scripts and pages interact — loading order, deferring, modules — but that’s browser territory, and this part of the course is about the language. We’re using the browser purely as a convenient place to press “run.” It’s one host among many.