Java script tutorial by example

Applicatons Development

Paper 32-26

JavaScript Tutorial by Example
Iza Peszek, Merck & Co., Inc., Rahway, NJ

frame and suppresses the borders, so the displayed
document does not look fragmented. We also define the
ABSTRACT source documents for the frames.
This paper presents a code walk-thru for a useful
JavaScript application designed to construct a call for a <html>
SAS  macro. It is intended to help you learn the basics <head>
of JavaScript by example. It is not a comprehensive
<title>
JavaScript tutorial: you are encouraged to consult books
macro call maker for dohtml
on JavaScript to read more about the presented
</title>
techniques. Some good references are given at the end of
<script language="JavaScript">
the paper.
You can use the code “as is” without understanding
window.moveTo(0,0);
HTML tags, but the paper will be easier to follow if you
window.outerWidth=screen.availWidth;
have some familiarity with HTML syntax.
window.outerHeight=screen.availHeight;
Note that the presented application is designed in such a
way that SAS programmers can generate it for any macro
</script>
in their library using a relatively simple (guess what?) SAS
</head>
macro!
<frameset rows="25%,*"
framespacing="0" border="0"
frameborder="0">
INTRODUCTION <frame name="topframe"
src="dohtml_top.htm">
The purpose of the application, which will determine its
<frame name="bottomframe"
design, is to:
src="dohtml_form.htm"
• display the parameters of a specific SAS macro, as scrolling="auto">
well as the information about the macro and about its
<noframes>
parameters,
This page uses frames but your browser
• allow users to enter the values for the macro does not support them
parameters, </noframes>
• perform a validation of user input, </frameset>
• construct a valid macro call. </html>

Since we want to gather user input, we are going to use The first three lines of the JavaScript code maximize the
FORM FIELDS. This approach will let us provide some size of the window before it is displayed. This code works
default values for macro parameters or restrict the values only in Netscape Communicator.
to a finite set of specific choices. User input can be
processed and validated on a client by JavaScript. The <NOFRAMES>…</NOFRAMES> tag is
ignored by browsers which understand frames. Older
We also want to display information about the macro and browser, which can not deal with frames, will display the
about its parameters. Thus, we need to separate the message specified between these tags, so the users can
display area into information area and data input area understand why the application is not working.
The easiest way to do so is to use a FRAMESET
containing a Top Frame (information window) and a
Bottom Frame (parameter setting window). TOP FRAME
The document displayed in a top frame is very simple:
It is logical to display the information about the macro at
the start of the application, and the information about an <html>
individual parameter at the time the user is working with <body>
this parameter – i.e., when the cursor is inside the <p><b>Macro <a href="dohtml.htm"
parameter’s field. target="_parent"> %dohtml:</a></b>
The macro to produce interactive
graphs for web display (continue
This roughly defines a draft of the application structure.
description…)
Next we will take care of the implementation details.
</body>
Figure 1 presents a snapshot of the application window.
</html>

FRAMESET Note that the hyperlink uses a keyword target, so the
The application consists of three HTML documents: hyperlinked document will display in a “_parent” window,
parent frameset, top frame, and bottom frame. i.e. in a frameset document.

Let us start with the parent document. It defines a
BOTTOM FRAME
frameset with two frames, named “topframe” and
“bottomframe”. By naming the frames, we will be able to The bottom frame is the meat of the application. Let us
refer to them from within our JavaScript code. The start with a FORM to allow entering values for the macro
frameset reserves 25% of the display area for the top parameters. The FORM is placed inside a TABLE, so the


fields are aligned nicely: (there are more optional modifiers, but we will not need
them).
<body>
<form name=”dohtml”> By specifying a NAME for a form field, we can easily refer
<table > to it in JavaScript code. The keyword SIZE determines the
<tr><td align="right">device =</td> length of a textbox. Each browser renders the length
<td> slightly differently, so you need to find the best size by trial
<select size="1" name="Rdevice" and error. In most cases, the size of 20 or 30 works well.
onFocus="showhelp(1 )" The keyword VALUE specifies the text displayed in a
onBlur="hidehelp()"> field. Finally, the two event handlers - ONFOCUS and
<option value="gif733 ">gif733 ONBLUR - are used to specify JavaScript functions to
</option> run when user enters a field (e.g., by clicking a mouse on
<option value="gif570 ">gif570 a field) or leaves the field (e.g., by pressing “TAB” or
</option> clicking the mouse somewhere outside the field).
</select></td>
We will talk about JavaScript functions later.
<td rowspan="3">
<p>
<input type="button" DROP-DOWN LISTS
value="Default Values" The drop-down lists are constructed using a pair of tags
name="xxxxxxxxx2" onClick= <select></select>, inside which are one or more <option>
"parent.window.location.reload(); tags, defining elements in the list.
return true">
</p> The <select> tag has several modifiers. The modifier
<p> NAME will let us refer to the drop-down list in the code.
<input type="button" name="xxxxxxxxx3" The modifier SIZE specifies how many elements are
value="Macro Info" displayed to the user when the list is collapsed. The
onClick="showInfo()"></p> ONFOCUS and ONBLUR event handlers define the
<p> action triggered by the respective events.
<input type="button" name="xxxxxxxxx1"
value="Create Call" The <option> tag resembles the ancor (<a>) tag: the
onClick="makeCall()"> displayed value is specified between <option> and
</td></tr> </option> tags; while the “passed” value is specified by
<tr><td align="right">plotname =</td> the modifier “VALUE”. If you wish, you can also use a
<td> modifier SELECTED to specify which value is selected by
<input type="text" name="Rplotname" default:
size=" 30"
value="c:theplot.gif" <option value="gif733 " selected>
onFocus="showhelp(2 )" gif733 </option>
onBlur="hidehelp()">
</td></tr>
Remember that only one of the <option> tags should have
<tr><td align="right">datain =</td>
this modifier.
<td>
<input type="text" name="Rdatain"
size=" 30" value="plotdata " BUTTONS
onFocus="showhelp(3 )" Most – but not all – forms also use BUTTON fields. A
onBlur="hidehelp()"> button field is used to perform some action when the
</td> button is clicked. There are three types of buttons:
</tr> SUBMIT, RESET and BUTTON. The SUBMIT button,
</table> when clicked, will send form data for processing – unless
</form> the field modifiers redefine the onClick action. The
</body> RESET button clears all fields. The regular button does
not do anything when clicked unless you specifically write
Let us look at the form closely. an action code.

The form is enclosed in a pair of tags: <form>…</form>. The buttons we use in our application are all regular
The opening tag gives the form a name – so we can refer buttons. As for all form elements, we specify a name for
to it in JavaScript code. Inside a form, we will place form the button (keyword NAME) as well as the text displayed
fields. There are several types of form fields: text boxes, on its face (keyword VALUE). Finally, we specify a
text areas, drop-down lists, radio buttons, checkboxes, JavaScript function to be executed when the button is
etc. We will be using only text boxes and drop-down lists. clicked (event handler onClick).

TEXTBOXES TABLE
The textbox has a syntax The form fields are placed in a table, which lets us align
them nicely. The simples syntax for a table is as follows:
<input type="text" name= , size=,
value=, onFocus=, onBlur= > <table>
<tr>

2


<td>…</td> In theory, JavaScript code can be placed anywhere on a
<td>…</td> page. By placing it in the HEAD tag, however, we avoid a
… common pitfall of amateurish scripts: we are making sure
</tr> that the script is fully loaded before the page is displayed.
<tr> If we placed it inside a BODY tag, user could have
<td>…</td> performed an action calling some JavaScript function
<td>…</td> before the browser loaded the definition of this function.
… This would have caused a JavaScript error!
</tr>
… Our showInfo() function does not take any parameters
</table> and has just one line of body:

The tags <tr> and </tr> mark the beginning and end of a parent.topframe.location=
row; the tags <td></td> mark the beginning and the end of 'dohtml_top.htm'
a column. The tags can have several modifiers. In our
example, we use a modifier ALIGN to specify the Recall that our top frame was named “topframe”, so the
alignment of text in a cell. We also use a modifier function requests that the top frame displays the
ROWSPAN to merge several cells vertically (a modifier document “dohtml_top.htm”. What about the word
COLSPAN can be used to merge cells horizontally). “parent” in front? Well – remember that we are working
inside the document “bottomframe”, which knows nothing
Having defined our input fields, its time to add some about any other documents! But it knows about it’s parent
action! – the frameset – and the frameset knows it’s “childern”:
“topframe” and “bottomframe”. If you work in a frameset,
and you want to refer to one frame from another frame,
“DEFAULT VALUES” BUTTON you need to work your way “up” through a document
Let us start with a simplest action: resetting everything to which recognizes both frames!
default values. Our “Default Values” button has an
onClick action defined as

onClick= FUNCTIONS SHOWHELP() AND HIDEHELP()
"parent.window.location.reload()" Let us take a look at some other functions – showHelp()
and hideHelp() – which are called from each of our input
The action consists of two JavaScript statements, form fields:
separated with semicolon. Alternatively, we could specify
the name of a JavaScript function which performs these <input type="text" name="Rplotname"
actions. This is useful for complicated actions consisting size=" 30" value="c:theplot.gif"
of many steps. We will see an example of this scenario onFocus="showhelp(2)"
later. onBlur="hidehelp()">

A statement When a cursor is placed in a field, the onFocus event is
fired and a function showHelp() is called. This function
parent.window.location.reload() takes one parameter – in this case its value is 2. When a
cursor leaves a field, the onBlur event is fired, and a
acts as if user performed a “hard reload” of a page funtion hideHelp() is called.
(shift/Reload). It will display the document in its initial
form – as if opened for the first time – discarding any The showHelp() function is defined as follows:
changes made by user.
<head>
<script language="JavaScript">
“MACRO INFO” BUTTON function showInfo(){..}
When “Macro Info” button is clicked, it calls a JavaScript function showhelp(num)
function showInfo(). Do not forget a set of brackets at the {
end – JavaScript needs them to understand that you thetext =
mean a function, not a variable. "<html><head></head><body>";
thetext += "<table><tr><td>";
A function showInfo(), as well as the rest of JavaScript thetext += helptext[num];
code used on this page, is defined inside a HEAD tag: thetext += "</td></tr></table>";
thetext += "</body><html>";
<HEAD> parent.topframe.document.open();
<SCRIPT language="JavaScript">
function showInfo(){ parent.topframe.document.write(thetext
parent.topframe.location='dohtml_top.h );
tm'; parent.topframe.document.close();
} }
</SCRIPT> </script>
</HEAD> </head>
The first five lines define a text string thetext, containing

3


a proper HTML document. Note the operator “+=”, used Our main button – “Create Call” calls a function
to append the string on the right hand side to the string makeCall():
variable on the left hand side. The string thetext is hard-
coded, except for an entry helptext[num] – which is an function makeCall(){
element of an array helptext defined outside of this //definition here
function. The array helptext has 3 elements, }
corresponding to our 3 input fields. It contains “tool-tip
help” for the fields and is defined as follows: The purpose of this function is to gather and validate the
values supplied by user. If the validation fails, the function
<head> will display an error message and will not produce a
<script language="JavaScript"> macro call until the error is corrected. Once validation
var helptext=new Array(); passes, the function constructs the macro call, and
helptext[1]= displays the call in separate browser window.
'graphic device- select from list';
helptext[2]= This function is defined in a generic fashion, so its code
'name of the clickable plot'; does not need to be modified when we change the fields
helptext[3]= in our form. In fact, the whole application is designed so
'data set used to produce clickable that only the input fields on the form, macro information in
plot, with additional variables: ‘; the top frame document, and the tool tips corresponding
helptext[3]+=’<br>url_var, url_desc, to the form fields need to be changed if we want to create
xpixels and ypixles '; a call-maker for another SAS macro.

function showInfo(){..}
To facilitate this generic behavior, we are using a special
function showhelp(num){..}
naming convention for our fields: the fields name is
</script>
constructed from the name of the macro parameter, with a
</head> prefix R (required keyword parameter), K (non-required
keyword parameter) or P (positional parameter). Soon we
The first line, will see how this naming convention helps us to make our
function generic.
var helptext=new Array()
In the beginning, we declare some variables used inside
is a constructor for an array helptext. The following lines the function:
define the elements of the array – the indexes have to be
enclosed in square brackets. var theval;
var callText;
Note: Variables defined inside a definition of a function var currentObj;
hava a local scope: they are visible only to this function,
Variables defined outside any function have global scope: Although it is not strictly necessary, declaring the
they are visible to all JavaScript on a page. Thus, the variables up front improves readability of a program.
variable thetext exists only inside the function showHelp(),
while the array helptext is visible to all JavaScript on a We also start defining the value of a string variable
page. callText:

Argument passed to showHelp() function identifies which callText = "<h1> Macro call for macro
element of the array should be used inside the string ";
thetext. callText += document.forms[0].name;
callText += "</h1><p><pre>";
Tle last three lines of function showHelp() display the callText +=
constructed HTML document in the top frame. They open "%"+document.forms[0].name;
the top frame document for input, write text, and close the callText += “(<br>";
input stream so the control is returned to browser.
In particular, we are using a property
A function hideHelp() is a simplified, complementary document.forms[0].name – the name of our form. The
version of showHelp() – it dsplays an empty document in collection forms contains all the forms on a page. In
the top frame, clearing any field-specific information. JavaScript, the enumeration starts at 0, so forms[0]
denotes the first form on a page.
function hidehelp(){ Why don’t we use the name “dothml” directly? The reason
thetext = "<html><head></head><body is that we want our function to be generic, so we do not
></body><html>"; need to modify it for another SAS macro.
parent.topframe.document.open();
parent.topframe.document.write(thetext As we go along, we’ll keep appending to callText string
);
until our macro call document is constructed in full.
parent.topframe.document.close();
}
Next, we are going to process each of our fields:

MAKECALL() FUNCTION

4


For (i=0; Next, we perform the basic validation of the fields.
i<document.dohtml.elements.length;
i++) // code part 2
{ if (theval == ""){
// loop-processing if (currentObj.name.substr(0,1)=="P"
} ||
currentObj.name.substr(0,1)=="R"){
This is a simple iteration over all elements of the form. alert("The parameter
The collection '"+currentObj.name.substr(1)+ "' is
“document.forms[0].elements” contains all elements required. rn Please supply the
belonging to the first form on a page; the property value." );
“length” is a total number of form elements. currentObj.focus();
return false;
}
Inside the “for” loop, we refer to the form elements as
}
“document.forms[0].elements[i]”:
// continue loop processing
// code part 3
// loop-processing
// code part 1
currentObj = First of all, if the field is empty, we need to check whether
document.forms[0].elements[i]; it is required. Positional parameters and required keyword
if (currentObj.type !="button") { parameters can not have empty values, so our first “if–
if (currentObj.type == "text"){ else” statement checks for parameter type (recall our
theval = trim(currentObj.value); naming convention) by looking at the first character of the
field’s name:
}
else{
theval= currentObj.name.substr(0,1).
trim(currentObj.options[currentObj.sel
ectedIndex].value); The substr() method takes two arguments: starting
// continue loop processing position (0) and the length of the produced substring (1).
// code part 2 Note again that the enumeration starts with 0.
}
If the parameter is required and the field is empty,
This snippet assigns the current form field to the variable JavaScript will display a modal message – built-in
currentObj (so we can have shorter, more manageable function alert() –asking user to correct the error. It also
reference to the current form element) and determines the places the cursor in the problematic field
value of the field. (surrentObj.focus()). Finally, it “returns” so no other
statements are processed.
The first “if–else” statement tests the field and determines
whether the field is a button or an input field. Note that Once user corrects the problem and clicks “Create call”
JavaScript requires “==” to test for equality; an “=” button, the function is called again to call the makeCall()
operator is an assignment operator. For all fields except function after the errror is corrected.
the drop-down list, we can get the value using
currentObj.value property. For list boxes, the method is If the value of a field is not empty, but the parameter is a
slightly different: we figure out the value corresponding to keyword parameter, we append some blanks to callText to
the selected index. Thus, we need a second “if–else” make the display look nicer:
statement, which determines the type of the field. Note
that we trim the value to get rid of potential leading or // code part 3
trailing blanks. There is no trim() function in JavaScript, else {
so we need to write our own and place it in somewhere if (currentObj.name.substr(0,1)=="K"
between <SCRIPT> and </SCRIPT> tags: ||currentObj.name.substr(0,1)=="R"
){
function trim(thestring){ for (j=0;
var newstring=thestring; j<(9-currentObj.name.length);
for (j=0; j< thestring.length; j++){
j++){ callText+=" ";
if (newstring.substr(0,1) == " " }
){ }
newstring=newstring.substr(1); }
} // continue loop processing
if // code part 4
(newstring.substr(newstring.length-
1,1) == " "){ newstring =
newstring.substr(0,newstring.length- This way, the “=” signs will be aligned in the created
1);} macro call:
}
return newstring; %dohtml(
} device = gif733,
plotname = c:theplot.gif,

5


datain = plotdata) CONCLUSION
For keyword parameters, we need to include the name of This completes the analysis of a JavaScript used in our
the parameter in the macro call. Once again our naming application.
convention comes in handy: we can get the name of the
parameter from the name of the field – we just need to
Our field validation was limited to checking if all required
delete the prefix. The substr(1) method takes care of this.
fields have been specified. You can use more involved
By omitting a second parameter of the substr() method,
validation techniques by writing your own validation
we ask for all characters of the field name, starting with
functions. For example, you can define a function
the second. Then, we append the “=” sign:
exampleValidation(), taking as an argument a form field
element:
// code part 4
if (currentObj.name.substr(0,1)=="K"
|| function exampleValidation(element){
currentObj.name.substr(0,1)=="R"){ if ( element.value.substr(0,1) == "c")
{
callText+=
alert(element.name.substr(1) + " can
currentObj.name.substr(1) + " =
not start with 'c'!");
";
element.focus();
}
return false;
// continue loop processing
}
// code part 5
else {return true}
Next, we append the value of the field and insert a comma }
and a soft line break. The closing curly brackets close our
“if-else” and “for” loops.
Then, you would place a call to this function before
generic validation takes place:
// code part 5
callText+= theval+",<br>";
function makeCall(){
}
if
}
(ExampleValidation(document.forms[0].R
// loop done plotname) == false){return false;}
…
Next, we complete the definition of callText string by }
deleting the “,<BR>” at the end and appending the
closing parenthesis and closing HTML tags:
You can also validate the form fields based on the value of
other fields:
// loop done – construct call text
CallText =
Function exampleValidation2(element1,
callText.substr(0,callText.length-5);
element2){
callText+=")<br></pre>";
If (element1.value == “GIF533” &&
Element2.value == “details”)
Finally, if there was no validation errors, we open a {
separate window and write a callText string to display the alert(“You can not request details
macro call. for small display”);
element.focus();
// display call text return false;
var newWin = window.open('', }
'MacroCall','height=550,width=500'); }
newWin.document.write(callText);
newWin.document.close(); function makeCall(){
newWin.focus(); if (ExampleValidation2(
document.forms[0].Rdevice,
The window.open() method returns a window object which document.forms[0].Kdetails) == false){
we assign to the variable neWin, so we can refer to it return false;
later. This method takes several arguments: a URL for the }
document to place in a new window, a title for a new …
window, and the list of windows modifiers. In our case, }
we specified the height and width of a new window in
pixels.
By making JavaScript function quite generic, we can
Once the new window is opened, we write the place them in a separate document and include this
constructed macro call and close the input stream to external code in our HTML files as follows:
return control to the browser. Finally, we call the focus()
method do display the created window. <HEAD>
<SCRIPT language="JavaScript"
source=”../scripts/mysoure.js”>
</SCRIPT>

6


REFERENCES CONTACT INFORMATION
Your comments and questions are valued and
Goodman D. “JavaScript Bible”, IDG Books, 1998 encouraged. Contact the author at:
Iza Peszek
Wyke R.A., Gilliam J.D., and Ting C. “Pure JavaScript”, Merck & Co., Inc
SAMS, 1999 P.O. Box 2000, RY33-404
Rahway, NJ, 07065-0900
Peszek I., Troxell J. “Interactive SAS Macro Catalogs”. Work Phone: 732-594-3623
Proceedings of PharmaSUG’2000 Fax: 732-594-6075
Email: izabella_peszek@merck.com
TRADEMARK INFORMATION
SAS is a registered trademark or a trademark of SAS
Institute Inc. in the USA and other countries. ® indicates
USA registration.
Other brand and product names are registered
trademarks or trademarks of their respective companies.

Figure 1 : A snapshot of the application screen

7

Java script tutorial by example

Recommended

More Related Content

Viewers also liked (7)

Similar to Java script tutorial by example (20)

Recently uploaded (20)

Java script tutorial by example