This section provides a quick description of how to include JavaScript codes into HTML documents with 'script' tags. A tutorial example is provided on calling a function defined in the 'head' tag.
JavaScript code is designed to be executed mainly by Web browsers on client systems.
So JavaScript code needs to be embedded in HTML documents to be delivered to browsers.
HTML document language standard supports the "script" tag that allows you to include
JavaScript code in HTML documents. The syntax of the "script" tag looks like this:
In a single HTML document, multiple "script" tags with JavaScript codes can be placed in different locations.
The exact locations and relations of "script" tags are described in following simple rules:
"script" tags can be placed inside the "head" tag.
"script" tags can be placed inside many block-level tags, like "body", "p", "pre", "div", etc.
"script" tags can be placed inside many level-level tags, like "strong", "em", "span", etc.
JavaScript codes included in "script" tags in the "head" tag will be executed before the Web page body gets processed.
JavaScript codes included in "script" tags in the block-level and line-level tags will be executed while the Web page body
gets processed.
JavaScript codes included in "script" tags will be executed in the same order as they appear in the HTML document.
JavaScript codes from all "script" tags will be considered as a single execution session, as if they were
included in a single "script" tag.
Based these rules, we could define a user function in the "head" tag of the document,
and call it later in a "pre" tag in the same document. Here is a simple tutorial example
that shows this interesting behavior:
<html>
<!-- Hello_World_Head.html
Copyright (c) 2008 by Dr. Herong Yang, http://www.herongyang.com/
-->
<head>
<title>printHello() Function in the "head" Tag</title>
<script type="text/javascript">
function printHello() {
document.write('Hello World!');
}
</script>
</head>
<body>
<pre>
<script type="text/javascript">
printHello();
</script>
</pre>
</body>
</html>
Of course, the output of this sample JavaScript page will be a simple text on the page: "Hello World!".
