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.
Portability
Creating Portable and Modular Client-Side Scripts
External Scripts
|
