★ wanayoo — archive 1999 http://wdvl.internet.com/Authoring/Scripting/Modular/embedding_code.html

Embedding Code

March 15, 1999

Script is embedded into an HTML document within the HTML tags <SCRIPT> </SCRIPT>. You can place a block of <SCRIPT> anywhere in the HTML -- the script within is evaluated as the page loads into the browser in order of each line being read in, whether that line is HTML or script.

One can, then, embed some script which performs a calculation and places the result into the page as the page loads into the browser:

<h3>Today's date:<br>
<script>
 today=new Date();
 today=today.toLocaleString();
 document.write(today+"</h3>");
</script>
<br>
<h2>Welcome to this page...</h2>

This type of embedded script is useful when performing a quick, tiny task such as this, but you can also see why it is messy. We have HTML, we have JavaScript, all rolled into a block of code. A whole page of this, especially were it to contain very complex portions of script, would be a real nightmare to work on, notably if multiple people are developing the page.

The <script> tag actually takes some attributes and to be proper we should specify the scripting language being used, although it defaults to basic JavaScript.

<script language="JavaScript">
<script language="JavaScript1.1">
<script language="JavaScript1.2">
<script language="JavaScript1.3">

Each of the above variants of the <SCRIPT> tag specify the scripting language. If the browser does not contain support for the specified language then it ignores the program code within this set of tags. You can specify specific versions of the language, as seen above, to create a minimum cutoff -- only browsers which support that version or higher of the language will execute the code. This is especially useful when your code takes advantage of cutting edge features, such as "dynamic HTML", which requires version 4 browsers, which support a minimum of JavaScript 1.2.

Embedding, despite its many flaws, is the foundation on which client-side scripting has been based and so it is sometimes unavoidable. You can still create modular code in an embedded environment. Ideally, you would group together all of your functions into a block of <SCRIPT> contains inside the <HEAD> portion of the HTML document.

<html>
<head>
<title>My Favorite Site</title>
<script language="JavaScript1.2">
function1 { }
function2 { }
</script>
</head>
<body>
...etc...

This practice ensures that all of your modular functions will be loaded into the browser by the time any code further down attempts to call on them. Remember that all script code within a single HTML document, regardless of how many <SCRIPT> tags are used to divide it, is considered to be one program. Thus, any piece of code in the page can call any function which is also defined within the page.

The other side of this coin, however, is that none of your script carries over to any other page. Each HTML document is a universe unto itself, so if you want other pages in your site to share scripting actions each page must contain the necessary script. This huge limitation is a major blow to the goal of portability -- easily reusing a modular function on multiple pages.

There is a solution of sorts: external scripts, rather than embedded.