Applying JavaScriptS2C Home « 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 the HTML markup code for the form below that will change the paragraph text within the form to red when the 'Recolour Text' button below is pressed. The JavaScript 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='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>
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 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>
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 look at the HTML Intermediate Tutorials - Lesson 5 - More Links lesson. 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>
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>
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 1.10 section of the site.
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.
What's Next?
In the next lesson we look at variables and how to use them.
Homepage
Top