In this section, we will learn how to bring JavaScript into HTML.

JavaScript with HTML

JavaScript is a programming language that allows us to access the elements of an HTML document and runs any sort of modifications on them. It also allows us to automatically create an add new element to a page if we needed.

There are a lot of things we can do with JavaScript which you can learn about them in the JavaScript tutorials section. But first and foremost, let’s see how we can add a JavaScript code to an HTML document.

So let’s go and see how to do it.

How to use JavaScript in HTML?

There are two ways by which we can add a JavaScript code to an HTML document. Both are done using an HTML element called <script>; but this element can be used in two different methods.

These methods are:

• HTML <script> Tag: Inline Scripting
• HTML <script> Tag: Link JavaScript to HTML

HTML <script> Tag: Inline Scripting

The first method of using JavaScript source codes in an HTML document is by adding those codes directly within the body of the <script> element.

Basically, the body of the <script> element (between the opening and closing tags or the <script> element) is the area where we can write JavaScript codes and browsers will run that automatically when they reach to the body of the <script> tag.

Example: running JavaScript in HTML

See the Pen running JavaScript in HTML by Omid Dehghan (@odchan1) on CodePen.

Here the statement you see within the body of the <script> element is a call to the `alert()` function, which is a JavaScript built-in function and it is used to show a message using a small pop-up window.

Note: we used an attribute called `type` with the value `text/javascript`. This an optional attribute that signals browsers the type of content we are bringing using the <script> element. Basically, the value `text/javascript` tells browsers that the content of this element is JavaScript codes and thus browsers know how to interpret the content properly now. But as mentioned, the use of this attribute is optional and browsers are smart enough to know when we’re using JavaScript. So you can delete the attribute if you want to.

Link JavaScript to HTML

The second method of brings JavaScript source codes into an HTML document is again with the help of the <script> element but using its `src` attribute! Basically, this time we write the actual source code in an external file (a file that is independent from our HTML document) and then set the address of that file as the argument of the `src` attribute. Now when browsers see the target <script> element and its src attribute, they will send a request to that address in order to get the JavaScript source code and after getting the file, browsers start to run the instructions of the source code.

Note: when using the <script> element, we have the choice of either put the source code inside the body of the element or call the src attribute to set the address of the file that contains the source code. But remember, we can’t use both methods using one <script> element! It must be only one of them per each <script> element.

Example: importing JavaScript into HTML

See the Pen importing JavaScript into HTML by Omid Dehghan (@odchan1) on CodePen.

Import Multiple JavaScript Files to HTML

In an HTML document, we’re not limited to just one <script> element! Actually, we can add as many <script> element as we need! For example, using one of the <script> elements, we can add an external JavaScript source file while using another <script> element, we can directly add source codes to the document.

Browsers thus interpret each <script> element as they reach to them and run the instructions one by one from top to bottom for each <script> element.

Example: adding multiple JavaScript into HTML

See the Pen adding multiple JavaScript into HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <noscript> Tag

Be aware that not all browsers support JavaScript! Users have this ability to turn off the use of JavaScript in their browsers! This means if they opened your website, none of the JavaScript source codes of your website will work with those browsers!

Now, if it is super important to alert users they must allow the use of JavaScript in their browsers, you can use the <nonscript> tag then. The content you put within the body of this element only runs if the target browser that loaded the page didn’t allow the execution of any JavaScript code!

So we can put a simple message within the body of this element, alerting users they must turn on the use of JavaScript, otherwise the website won’t be able to service those users properly.

Example: using <noscript> tag in HTML

See the Pen using <noscript> tag in HTML by Omid Dehghan (@odchan1) on CodePen.