Adding JavaScript Code To a Web Page

This lesson is part of the Web Programming 1 Course.

There are three ways that you can incorporate JavaScript code into a web pages:

1. Put the code inside a script element
2. Link to a JavaScript file
3. Use various attributes (which start with 'on')

Put the Code Inside a SCRIPT Element

As you have seen in the previous lessons, you can put JavaScript code inside a SCRIPT element, like so:

<script>
    const message = "Hello World!";
    alert(message);
</script>

Normally the script element goes inside the head element, but it doesn't necessarily have to go there. In a future lesson we'll see how the placement of the script element can affect your program.

We'll use this approach for most of the code samples that we write in this course because it's convenient for use to keep our code in the same web page that demos it.

Link to a JavaScript File

The recommended approach to incorporating JavaScript code into a website is by putting it in its own file and then linking to it. This allows many pages to to link to the file, and makes updates easy because you simply have to update one file, and then all the pages that link to it will also be updated. JavaScript files have a .js extension, and it's usually best to create a folder in your site that contains all of the JavaScript files used. The video demonstrates how to set up a JavaScript file and then put a link to it in an HTML document. We created a file named test.js and put this code into it:

alert("Hello from test.js!");

Then we created a sample web page and put this code inside the head element:

<script src="test.js"><script>

The script element is empty (there is nothing in between the opening and closing tags), but the value of the SRC attribute is the path to the JavaScript file.

In summary, here are the benefits to putting code in separate .js files and linking to them from your web page:

• It allows you to keep your JavaScript code separate from your HTML code
• It allows you to use the same JavaScript code in many web pages
• It makes it easy to update/maintain your site, because you can make a change to one .js file and then all the pages linking to it will automatically be updated.

Use Various Attributes

There is another way to embed JavaScript code into web pages, and for a long time it was considered bad practice, but I've noticed that over the last few years it's making a bit of a comeback. You can embed code directly into elements by using certain attributes. For example, you can add the onclick attribute to an element, and set its value to some JavaScript code. In the video we did this on an h1 element:

<h1 onclick="console.log('Hello from H1');">Embedding JS Code in a Page<h1>

By adding the alert to the onclick attribute, it will be triggered when the h1 element is clicked. There are other attributes, whose names begin with 'on' that you can use as well. For example, if you use the onmouseover attribute, then the JavaScript code will be triggered when the mouse hovers over the element.

In general, this approach is not recommended because it makes a mess your page by sprinkling JavaScript all throughout the HTML code. It's usually easier to understand a program (or parts of a program) if the JavaScript code is all together in one place. But I have noticed that some JavaScript frameworks, such as React, have been making use of this approach.