To use the JavaScript source code within a web page, you need to link the JavaScript file to the web page or embed the JavaScript file in the HTML file.
This is done via the HTML element named <script>.
This element can be used in two different ways: On the one hand, as we will demonstrate subsequently, external JavaScript files can be included in the HTML. On the other hand, JavaScript source code can be written directly between the opening <script> tag and the closing </script> tag.
The latter approach is only useful in exceptional cases because JavaScript code and HTML code are then mixed—that is, stored in one file (which is not a best practice). So, let's look at how to do it properly.
The <script> element has a total of six attributes, out of which the src attribute is certainly the most important one: it’s used to specify the path to the JavaScript file that is to be included. (The table below shows an overview of what the other attributes do.)
Now create an HTML file named index.html and insert the content shown in this listing.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="styles/main.css" type="text/css">
</head>
<body>
<!--Here the JavaScript file will be included -->
<script src="scripts/main.js"></script>
</body>
</html>
If you now open this HTML file in the browser, nothing will happen yet because the function is not yet called at any point. Therefore, add the show-Message() call at the end of the JavaScript file, as shown in the next listing, and reload the web page in the appropriate browser. Then a small hint dialog should open, containing the message Hello World and with a slightly different appearance depending on the browser (see figure below).
function showMessage() {
alert('Hello World');
}
showMessage();
Definition: Multipurpose Internet Mail Extension (MIME) types, also called internet media types or content types, were originally intended to distinguish between content types within emails containing different content (such as images, PDF files, etc.). Now, however, MIME types are not only used in the context of email, but also whenever data is transmitted over the internet. If a server sends a file with a special MIME type, the client (e.g., the browser) knows directly what type of data is being transmitted.
For JavaScript, the MIME type wasn’t standardized for a long time, so there were several MIME types—for example, application/javascript, application/ecmascript, text/javascript and text/ecmascript. Since 2006, however, there is an official standard (www.rfc-editor.org/rfc/rfc4329.txt) that defines the acceptable MIME types forJavaScript. According to this standard, text/javascript and text/ecmascript are both deprecated, and application/javascript and application/ecmascript should be used instead. Ironically, it’s safest not to specify any MIME type for JavaScript at all (in the <script> element) as the type attribute is ignored by most browsers anyway.
Embedding Multiple JavaScript Files: Of course, you can embed several JavaScript files within one HTML file. Simply use a separate <script> element for each file you want to include.
Editor’s note: This post has been adapted from a section of the book JavaScript: The Comprehensive Guide by Philip Ackermann.