Integrate JavaScript on webpages
| Introduction to JavaScript |
|---|
|
There are several ways to integrate JavaScript-Code in a webpage: JavaScript integrated directly in the webpage, but in a separate HTML script-tag, an external .js file loaded with a tag, and inline JavaScript which is put directly in other HTML tags. Every method has it's advantages and may be used only under certain circumstances.
First let's take a look at the
Internal JavaScript
This method is good for small to medium sized programs, that are only to be included in a single webpage. For that script tags are used:
<script type="text/javascript">
// JavaScript code goes here
</script>
The type attribute given tells the browser the mime type of the data enclosed by the script tag. There are no rules about where to place a script tag on a HTML page. It's only important to put the JavaScript code after the HTML tags that are accessed by DOM functions in the script. E.g.:
<html>
<body>
<script type="text/javascript">
document.getElementById('test').innerHTML = "Hello, world!";
</script>
<div id="test"></div>
</body>
</html>
This script should throw an error like "document.getElementById("test") is null". Put the script tag after the div tag and the program runs fine.
Some of you already may have seen such script tags and may wonder about the javascript code being enclosed by further characters inside the script tag.
<script type="text/javascript">
<!--
// JavaScript code goes here
//-->
</script>
or
<script type="text/javascript">
/* <![CDATA[ */
// JavaScript code goes here
/* ]]> */
</script>
The first one is from early browser days when not all browsers knew how to handle the script tags. To prevent the JavaScript program being visible to the user as part of the webpage the programmers enclosed their JavaScript program with HTML multi line comments <!-- (start multi line comment) and --> (end multi line comment, the // is for the JavaScript capable browsers to not interpret the --> as JavaScript code). Nowadays these HTML comments are not needed because all major browsers know about script tags and know how to handle it's content.
The second enclosement is needed if you want to use the script tags in a XHTML page. In HTML the script tag may contain only CDATA (character data), that simply means the content of the script tag is not parsed by the HTML parser. In XHTML standard the script tags may contain PCDATA (parsed character data), that means the XHTML parser trys to interpret characters like <, >, and & which will appear very often in a JavaScript program possibly causing parser errors. To prevent the code being interpreted by the parser you have to declare the content of the script as a CDATA section which is done with the tags <![CDATA[ (open CDATA section) and ]]> (end CDATA section). The JavaScript comments /* and */ are used to prevent the JavaScript interpreter from parsing the CDATA tag.
Another way to prevent the PCDATA issue in XHTML is to use
External JavaScript
Here the JavaScript program is put into a separate file, usually with file extension .js. The program in this separate file is then included in a very similar way as is internal JavaScript, using the script tag:
<script src="example.js" type="text/javascript"></script>
The src attribute is used to tell the browser where to find the JavaScript code and the script tag has no child nodes. This method is used for larger JavaScript programs which are used on two or more web pages. Usually the script tags are put in the <head>-section. For example JSXGraph is usually included this way:
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jsxgraphcore.js"></script>
</head>
Inline JavaScript
To link HTML tags with JavaScript one can use inline JavaScript. Inline JavaScript is given in certain attributes in HTML tags, e.g. onclick, onmouseup, ...:
<script type="text/javascript">
/* <![CDATA[ */
function click() {
alert("mouse clicked");
}
/* ]]> */
</script>
<a href="http://www.example.com" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>
See this example in action:
To use a link just for JavaScript, simply put # into href attribute:
<a href="#" onmouseout="alert('mouseout');" onclick="click();">just a link with javascript</a>
Examples for such attributes are (they are pretty self-explanatory): onchange, onmouseover, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onunload
