http://polaris.umuc.edu/~flazarus/
JavaScripts
How does one learn how to write JavaScripts? You do it by
deconstructing scripts written by others. Do note however, JavaScripts
must be embedded in HTML/XHTML pages so you need a good handle on
HTML/XHTML before you attempt to write scripts. That said ...
Let's consider three JavaScripts!
#1 Time Stamp
This script, an immediate script
1, executes as soon as the
browser scans down to it. It is located within the <body></body>
tags and writes out the date and time using the viewers clock.
<!-- locate within the body tags -->
<script type="text/javascript">
<!-- Engage Cloaking Device
var today = new Date()
document.write(today);
// Drop Cloak -->
</script>
#2 Alert
Here is another script with a bit of dynamics added. It requires
the viewer a click on the button in order to call the script. It is
located within the <head> </head> tags and therefor can be
called repeatedly, a feature of a delayed script. The calling button
is created using a form located within the <body></body> tags.
<!-- locate within the head tags -->
<script type="text/javascript">
<!-- Engage Cloaking Device
function bang(){
var first="Let's deconstruct some scripts!"
alert(first);
}
// Drop Cloak -->
</script>
<!-- locate within the body tags -->
<form id="bang" action="##">
<p><input type="button" value="click here"
onclick="bang();"></p>
</form>
#3 Extracting
This immediate
1 script, located within the <body> </body>tags,
writes the title and URL of the page being viewed. These values are
cached by the browser and can be extracted using the document object.
The page title and URL are properties of the
document object as are other elements of the page.
<!-- locate within the body tags -->
<script type="text/javascript">
<!-- Engage Cloaking Device
var title=document.title
var URL=document.URL
document.write("Title:  "
+ title + "<br>" + "URL:  "
+ URL + "<br><br>"); // all on one line
// Drop Cloak -->
</script>
Ok let's deconstruct (i.e., take apart and explain in detail)!
The Script Envelope
First we note that the scripts are enclosed within special html <script>
tags. Alternately JavaScript elements may be embedded within html constructs
such as the form.
The first line of this tag set identifies, to the browser, that
the language between the beginning and ending script tags is JavaScript,
one of many possible languages. The required 'type' attribute of the
'script' tag specifies the type of the scripting language, e.g.,
text/javascript. Note that " " are required for all attributes.
<script type="text/javascript">
/* The symbol set <!-- and // --> when used at the beginning
and end of scripts, as shown below, prevent browsers that do not support
JavaScript from rendering the script. */
<!--
Your wonderful script goes here!
// -->
/* Most html tags present as a pair of tags. An opening tag, that may
include attributes, is coupled with an ending tag identified with a preceding forward slash as shown below. */
</script>
Note: Though HTML is not case sensitive, JavaScript and XHTML are case
sensitive. Therefore use all lower case for scripts except where mixed
case is explicitly required, for example to differentiate the variable
names mugwump and mugWump.
Script #1 Time Stamp
Now let us address the two working lines of the time stamping script.
/* var, a variable identifier, creates the variable 'today' (in
actuality a memory location). The reserved word 'new' is a constructor
that captures an instance of time from the JavaScript 'Date' object,
one of many built in objects. The () allow for the assignment of
parameters though none are required here. The = sign is an assignment
operator that stores this time value in the variable 'today.' To write
out this snippet of time we use another object, the document object,
and its associated method 'write().' The document object is a container
for many elements on a Web page. The write method, as you can see,
accepts as a parameter the variable 'today' which it uses to determine
what to write. Note the ; is used to terminate the document.write()
statement. Though not mandatory such terminations for all JavaScript
operating statements is strongly advised. */
var today = new Date()
document.write(today);
/* Q.E.D. */
Script #2 Alert
Now let us address the four working lines of the first part of the 'alert' script.
/* Here we have a function named bang(). The () are required
and can be used to include parameters, though none are used here. A
JavaScript function is a way to bundle statements and have them work as
a unit. This function, created using the reserved word 'function,' has two statement lines, 'var' which creates a variable 'first', assigned to hold a literal, the characters between the " " marks, and on a second
line an alert method. This alert method statement pops up a dialog box
that displays the content within the (), which in our case is the literal
- the value stored in the variable "first".
There are two other closely related methods, prompt(), and confirm(), that
also pop up dialog boxes. The prompt allows the user to enter information
in a text field which is similar to a form's <input type="text"... >
In addition there are two operative buttons, OK and Cancel. Either the
text entered by the user or a null is returned. The confirm method is
similar however true or false is returned depending on the button
clicked by the user. The prompt and confirm methods are demonstrated below. */
/* Lastly note the braces {}, which contain the function's statements. The
braces become particularly important when nested statements are used. */
function bang() {
var first="Let's deconstruct some scripts!"
alert(first);
}
Now let us address the 'form' part of the script.
<!-- This is an ordinary html form with a JavaScript onClick event handler incorporated into the construct. Note that each form on a page
needs an ID to distinguish it from other forms on the page. 'input type' identifies a forms dialog element, in our case a button. Upon clicking the button the form's onClick event is activated calling the function 'bang.' -->
<form id="bang" action="##">
<p><input type="button" value="click here"
onclick="bang()"></p>
</form>
<!-- Also notice that the <input ... construct is enclosed
in a paragraph, i.e., <p>, envelope. This is a XHTML requirement. In addition
the form action attribute is marked as null since the input is not delivered to a
server. -->
<!-- Q.E.D. -->
Script #3 Extracting
This script has three working lines. In the first two variables are
assigned. This assignment is followed by our now familiar document.write()
method.
<script type="text/javascript">
<!-- Engage Cloaking Device
/* Information is extracted from the document object
and assigned to appropriately named variables. */
var title=document.title
var URL=document.URL
/* The document object's write method is used to write
out these variables. Do note that the document.write()
construct must be written on a single line. It is folded
here for presentation convenience. */
document.write("Title: " + title +
"<br />" + "URL: " + URL + "<br /><br />");
/* Also note that all literals, including HTLM tags, must
be enclosed within " " when used as document.write
parameters. Further, the literals and variables are
concatenated using the "+" operator. */
// Drop Cloak -->
</script>
Notes:
1. An 'immediate' script is located within the <body> tags rather
than the more common location within the <head> tags and 'runs'
when the browser, which scans the HTML code from top to bottom, reaches
the script. Hence the term immediate. Scripts located within the <head>
tags, called delayed scripts, are scanned into memory and then called later.
Back to last page
Return to CMST 385 Top Index
Return to CMST 386 Top Index
Return to CMST 398J Top Index
