Including JavaScript Codes with HTML "script" Tags

JavaScript Tutorials - Herong's Tutorial Examples

∟Including JavaScript Codes with HTML "script" Tags

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:

<script type="text/javascript" ...>
   ... JavaScript statements ...
</script>

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 line-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 HerongYang.com. All Rights Reserved.
-->
<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>