Intro to JavaScript Includes

Why use includes?

• To save time
• To improve consistency
• To make sweeping changes instantly

What is an include?

Basically, it is a line of code that tells the browser to insert another piece of code at its location.

More about JavaScript Includes

Using JavaScript to include HTML code in your pages is both very basic and effective. In fact, including a JavaScript file is one step in the implementation of most of the other techniques we cover here.

From the perspective of the WebMaster or Programmer, one of the steps to writing more readable and maintainable code is to write code as modular as possible. You don't want to have multiple copies of your code all over your site. Each instance of the code would have to be updated whenever a change was made. Not only would it be time consuming, it is also prone to error.

Even if the bit of HTML code you replace with a JavaScript include is very small, if it is likely to change, it still makes sense to use an include because making the change becomes so much easier.

A useful example

Your ANGEL course is likely to have many pages of content. Perhaps as an instructor you want to take every measure possible to gather input and feedback from your students. You plan to use the feedback you receive to identify problems with the course and improve it. Rather than wait until the course is over and then conduct a survey, you want to ask for feedback at the end of each section, or maybe even each page. You decide to put something like I have below at the bottom of each page.

Here is what the source code for this example would be:

<table width="50%" border="0" align="center" cellpadding="5" cellspacing="0" style="border: 1px dotted red">
   <tr>
     <td bgcolor="#990000"><font color="#FFFFFF">
     <strong>Feedback? Questions?</strong></font></td>
   </tr>
   <tr>
     <td><p>If you have any questions or comments related to the
     topic or content just covered, please send it to your instructor
     now using the link below.</p>
     <p align="center"><a href="mailto:teacher@school.com">
     Submit feedback</a></p></td>
   </tr>
</table>

Rather than copying and pasting this code into every page in your course, you could use a JavaScript include. You would create a file and place it in the Associated File Manager at the Lessons level. In this case you could create a file called 'feedback.js', the source for which would be:

document.write('<table width="50%" border="0" align="center" cellpadding="5" cellspacing="0" style="border: 1px dotted red">');
document.write('<tr><td bgcolor="#990000">');
document.write('<font color="#FFFFFF"><strong>Feedback? Questions?</strong></font>');
document.write('</td></tr><tr><td>');
document.write('<p>If you have any questions or comments related to the topic or content just covered, please send it to your instructor now using the link below.</p>');
document.write('<p align="center"><a href="mailto:teacher@school.com">Submit feedback</a></p>');
document.write('</td></tr></table>');

Then any time you want to insert the feedback table into one of your pages you would use the JavaScript code to include the 'feedback.js' file that creates the table. The code would be:

<script language="JavaScript" src="../feedback.js"></script>

A tool is available that will convert your HTML code into JavaScript code for you, to save you the time and effort. Click here to open the tool.