External & Internal JavaScript: Explanation & Examples

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

This lesson explains the differences between inline and external JavaScript, and demonstrates how to use both methods through examples. It also discusses some of the benefits of external JS.

Inline vs External JavaScript

In HTML documents and web pages, there are two ways to include JavaScript code. One way is to include the code internally, known as the inline method. Using this method, the code is written inside the <script> element.

In the external method, the JavaScript code is contained in an entirely separate external document, with a file extension of .js. This extension, as you probably have already guessed, stands for JavaScript. The external file will then be referenced in the HTML document using the syntax: <script src = "externalFile.js"></script>

An important point to remember about the above syntax is that if there is any inline JavaScript code included between the <script> and </script> HTML tags, it will not execute because the browser has been ''told'' to look for JavaScript code outside the HTML document.

Now let's see an example of each method and discuss the differences in approach.

Inline JavaScript

In the following example, the HTML document contains a form, and underneath it follows the <script> element with the JavaScript code. The function in the code is called directly from inside the HTML form, using an event handler.

<!DOCTYPE html>
<body>
<form onsubmit="inline(); return false">
Password:
<input type = "password">
Message:
<textarea rows="2" cols="50">
</textarea>
<input type = "submit">
</form>
<script>
function inline(){
var password = document.getElementsByTagName("input")[0].value;
var input = document.getElementsByTagName("textarea")[0];
if (password != ""){
input.value = "Your password has been successfully submitted.";
}
}
</script>
</body>
</html>

Let's see how this works in a little more detail. As mentioned above, the JavaScript code in the <script> element contains the function inline(). The commands in this function will be executed only when the user clicks the ''Submit'' button. This is specified in the HTML line that begins the form:

<form onsubmit="inline(); return false">

The inline() function's purpose is to determine if the user has entered a value in the ''password'' field, and if they have, to alert the message ''Your password has been successfully submitted'' inside the <textarea> element.

Now let's see how to create an HTML document that will look and work the same (as far as the user is concerned), but will do so using an external JavaScript file.

External JavaScript

This is the HTML document that references the external JavaScript file:

<!DOCTYPE html>
<body>
<form>
Password:
<input type = "password">
Message:
<textarea rows="2" cols="50">
</textarea>
<input type = "submit">
</form>
<script src = "external.js">
</script>
</body>
</html>

And this is the code in the external JavaScript file:

var submitButton = document.getElementsByTagName("input")[1];
submitButton.addEventListener("click", external);
function external(e){
var password = document.getElementsByTagName("input")[0].value;
var input = document.getElementsByTagName("textarea")[0];
if (password != ""){
input.value = "Your password has been successfully submitted.";
}
e.preventDefault();
}

Starting with the HTML document, notice that overall it's a smaller document compared to the first example, because it doesn't need to contain as much information. The two really important differences are:

  • The JavaScript code is stored in the external file external.js and is referenced in this line: <script src = "external.js">
  • The <form> element no longer contains the onsubmit event handler, because this too is now included in the external JavaScript.

So let's move on to the actual code, in the obviously-named external.js file:

The first line of code identifies the form's ''Submit'' button and stores it in the submitButton variable:

var submitButton = document.getElementsByTagName("input")[1];

The next line adds an event listener, so that when the ''Submit'' button is clicked, it triggers the external() function:

submitButton.addEventListener("click", external);

The external() function is almost identical to the inline() function in the first example; it performs the same actions, displaying a message only if the user has entered something in the password field.

There is only one real difference between the two functions. In the external function, we included an argument, 'e'. This is an arbitrary value, only so we could attach to it the preventDefault() method in the function's last line:

e.preventDefault();

This allows the results to remain displayed on the page after the user clicks ''Submit''. Without this, the results would appear for a split second, then the page would reload.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account
Support