Applying JavaScript JS Home  <<  JS Basics  <<  Applying JavaScript

In this lesson we learn how to apply JavaScript into our web pages and look at the various ways to do this. We can do this inline within the markup or via internal/external scripts that reside within the <body></body> HTML element of a page. We will discuss each way of inserting script in turn whilst explaining best practice.

Inline Scripting

Following is some sample HTML markup code that will change some text to red when the 'Recolour Text' button below is pressed. The JavaScript is applied via the onclick attribute and so we are mixing behaviour into our markup. This makes The JavaScript quite obtrusive and is not recommended.


<form action='#'>
  <p id='turnred'>Press button below to change text colour of this paragraph to red.</p>
  <input type="button"
         onclick="document.getElementById('turnRed').style.color='red';" 
         value="Recolour Text" />
</form>

Press button below to change text colour of this paragraph to red.

Internal JavaScript File

Following is some JavaScript code that we have placed as the last entry within the <body></body> HTML element. This does not mix behaviour with markup and so using JavaScript this way is unobtrusive, efficient and recommended.


<script >
  window.onload = function() {
    document.getElementById('greenButton').onclick = function() {
      document.getElementById('turnGreen').style.color = 'green';
    };
  };
</script>

Following is the HTML markup code for the form below that will change the paragraph text within the form to green when the 'Recolour Text2' button below is pressed.


<form action='#'>
  <p id='turnGreen'>Press button below to change text colour of this paragraph to green.</p>
  <input id='greenButton'>
         type="button"
         value="Recolour Text2" />
</form>

Press button below to change text colour of this paragraph to green.

External JavaScript File

We use external JavaScript files by pointing to a URL on our site.

Place JavaScript files as the last entries within the <body></body> HTML element for efficiency.


<script src="../js/lesson4.js"></script>

For an in-depth look at how relative URLs are worked out take a look at the HTML Doctor Website - HTML Intermediate Tutorials - Lesson 5 - More About Links. Within the file we have two functions as shown below:


function turn_purple() { 
  document.getElementById('turnPurple').style.color = 'purple';
}

window.onload = function() {
  document.getElementById('blueButton').onclick = function() {
    document.getElementById('turnBlue').style.color = 'blue';
  };
};

Following is the HTML markup code for the form below that will change the paragraph text within the form to purple when the 'Recolour Text3' button below is pressed. The JavaScript function turn_purple() is applied via the onclick event attribute and so we are mixing behaviour into our markup. This makes The JavaScript quite obtrusive and is not recommended.


<form action='#'>
  <p id='turnPurple'>Press button below to change text colour of this paragraph to purple.</p>
  <input id='purpleButton'>
         type="button"
         onclick="turn_purple()"
         value="Recolour Text3" />
</form>

Press button below to change text colour of this paragraph to purple.

Following is the HTML markup code for the form below that will change the paragraph text within the form to blue when the 'Recolour Text4' button below is pressed.

This does not mix behaviour with markup and so using JavaScript this way is unobtrusive and recommended.


<form action='#'>
  <p id='turnBlue'>Press button below to change text colour of this paragraph to blue.</p>
  <input id='blueButton'>
         type="button"
         value="Recolour Text4" />
</form>

Press button below to change text colour of this paragraph to blue.

But wait nothing happens when we press the button? Unfortunately using window.onload is a one trick pony and can only be used once per page, so the last file or script to use window.onload will be the only one used. In our examples the 'inline script comes last within the HTML markup and so wins and the button above is ignored.

Reviewing The Code

We could have placed the internal script within the window.onload in the external javascript lesson4.js file and both the 'greenButton' and 'blueButton' could have worked from this.

There are better ways to do things than using window.onload that are discussed in the JQuery section of this site: jQuery Basics - Lesson 1 - Getting Started.

As a general rule of thumb, use external script files to place your JavaScript in, so it can be reused on other pages. This also means that any changes are made in one place, cutting down on maintenance and errors. Ensure that you don't mix behaviour (JS) with style (CSS) or structure (HTML), not only is this good practice but makes amendments easier and safer .


Lesson 4 Complete

In this lesson we looked at how we can apply JavaScript to our web pages and and how to do so unobtrusively.