An Object Based Scripting Language Similar in Concept To

110
JavaScript
• An Object Based Scripting language similar in Concept to
VBScript i.e., it is an interpreted language and supports
DOM. Thus use of window, document, form, navigator,
location objects is similar to VBScript.
• Syntax is similar to C language (has less things in common
with Java Language).
• Arrays and Collections use [ ] brackets instead of ( ).
• Unlike VBScript, JavaScript is case Sensitive.
• Very popular for Client-side Scripting since both Netscape
and Internet Explorer support JavaScript.
• There are a few versions of this language e.g., Microsoft
version is referred to as JScript. There is also a standard
version referred to as ECMAScript.
• JavaScript counts time in milliseconds. The reference point is
January 1, 1970.
• Variables do not need to be declared but it is a good practice to
do so. var is used to declare variables (similar to dim in VBScript).
• Client side Javascript code can be placed in HTML
Comments inside a <SCRIPT> tag.
• The default scripting language in a browser is JavaScript.
• + is used to catenate strings.
• Event names are similar to VBScript such as onClick for
button clicks and onBlur for loosing focus from an element.
• The element object properties are also similar to VBScript
such as .value for reading data from a text box, .checked to
see if a check box is checked etc..
• JavaScript provides a set of Math functions such as
Math.random( ), Math.sine( ), Math.floor(.), Math.ceil( ) etc..
• Each statement in JavaScript should be terminated by a ; (as
is done in C language)
• Parantheses are required in calling a function.
Example:
111


<HTML>
<HEAD>
<TITLE> Client side scripting - Javascript-Reading Data from Text Boxes </TITLE>
<SCRIPT LANGUAGE="Javascript">

</SCRIPT>
</HEAD>
<BODY>
<H2> <CENTER> Client Side Scripting using JSCRIPT </CENTER> </H2>
<H3> <CENTER> Text Box Attributes and Reading Data From Them </CENTER></H3>
<HR>
<FORM NAME=frmData>
<PRE>
Name: <INPUT TYPE=TEXT NAME=txtName SIZE=30 MAXLENGTH=28 TABINDEX=1>
ID : <INPUT TYPE=TEXT NAME=txtID SIZE=15 MAXLENGTH=12 TABINDEX=2>
<INPUT TYPE=BUTTON VALUE="ENTER Data" NAME="cmdEnter" onClick="ReadData();">
<INPUT TYPE=RESET
NAME=cmdReset VALUE="RESET">
</PRE>
</FORM>
</BODY>
<HTML>
• Use \n instead of VbCrLf or Chr(13) to put a string on the

next line
112
Example: if statement, reading data from check boxes, “\n”

<HTML>
<HEAD>
<TITLE> Client side Javascript-Reading Data from Check Boxes </TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<H2> <CENTER> Client Side Scripting </CENTER> </H2>
<H3> <CENTER> Using the Check Box INPUT CONTROL </CENTER></H3>
<HR>
Check the Items You would like in your Dinner
<FORM NAME=frmData>
<PRE>
<INPUT TYPE=CheckBox NAME=chkSalad> Salad
<INPUT TYPE=CheckBox NAME=chkRice> Rice
<INPUT TYPE=CheckBox NAME=chkFish CHECKED> Fish
<INPUT TYPE=CheckBox NAME=chkDsrt> Dessert
</PRE>
<INPUT TYPE=BUTTON NAME=cmdEnter VALUE="Submit Choices" onClick="Enter();">
</FORM>
</BODY>
<HTML>
113
Example: for loop, arrays in Javascript [ ], reading data from option

buttons. Use new to create your own arrays e.g., a1 = new Array(20);
<HTML>
<HEAD>
<TITLE> Client side scripting - Javascript Reading Data from Radio Buttons </TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">

</SCRIPT>
</HEAD>
<BODY>
<H3> <CENTER> Using the Radio Button Control </CENTER></H3>
<H4> <CENTER> (Also referred to as Option Button sometimes) </CENTER> </H4>
<HR>
<H4> Choose a main Dinner Item </H4>
<FORM NAME=frmData>
<PRE>
Pizza <INPUT TYPE=RADIO NAME=optDinnerItem VALUE="Pizza" CHECKED>
Steak <INPUT TYPE=RADIO NAME=optDinnerItem VALUE="Steak">
Fish <INPUT TYPE=RADIO NAME=optDinnerItem VALUE="Fish">
<HR>
<H4> Choose a Dessert </H4>
Chocolate Cake <INPUT TYPE=RADIO NAME=optDessertItem VALUE="Chocolate Cake"
CHECKED>
Cheese Cake <INPUT TYPE=RADIO NAME=optDessertItem VALUE="Cheese Cake">
Icecream Sundae <INPUT TYPE=RADIO NAME=optDessertItem VALUE="Icecream Sundae">
<HR>
<INPUT TYPE=BUTTON VALUE="Submit Dinner and Dessert Choices" NAME="cmdSubmit"

onClick="cmdSubmit_OnClick();">
</PRE>
</FORM>
</BODY>
<HTML>
114
Example: “\t”, reading data from a drop down list box.

<HTML>
<HEAD>
<TITLE> Client side scripting - Reading Data from Drop Down List Box </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> <CENTER> Reading Data from the Drop Down List Box Control </CENTER></H3>
<H4> <CENTER> (SELECT and OPTION Tags are used to create the List Box)
</CENTER> </H4>
<HR>
<H4> Choose a Fruit </H4>
<FORM NAME=frmData>
<PRE>
<SELECT NAME=ddlFruit>
<OPTION VALUE=Orange> Orange
<OPTION VALUE=Apple SELECTED> Apple
<OPTION VALUE=Bannana> Bannana
<OPTION VALUE=Mango> Mango
</SELECT>
<HR>
<INPUT TYPE=BUTTON VALUE="Submit Fruit Choices" NAME="cmdSubmit"
</PRE>
</FORM>
</BODY>
<HTML>
Example: Reading data from a list Box.

<HTML>
<HEAD>
<TITLE> Client side scripting - Javascript Reading Data from List Box </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> <CENTER> Reading Data from the List Box Control </CENTER></H3>
<H4> <CENTER> (Use SIZE attribute to change a drop down to a List Box)
</CENTER> </H4>
<H4> <CENTER> (Use MULTIPLE attribute to allow multiple Selections)
</CENTER> </H4>
<HR>
<H4> Choose one or more Fruits </H4>
<FORM NAME=frmData>
<PRE>
<SELECT NAME=lstFruit SIZE=4 MULTIPLE>
<OPTION VALUE=Orange> Orange
<OPTION VALUE=Apple SELECTED> Apple
<OPTION VALUE=Bannana> Bannana
<OPTION VALUE=Mango> Mango
</SELECT>
<HR>
<INPUT TYPE=BUTTON VALUE="Submit Fruit Choices" NAME="cmdSubmit"

</PRE>
</FORM>
</BODY>
<HTML>
Example: Reading data from Text Area. Continuing on multiple lines.

<HTML>
<HEAD>
<TITLE> Client side scripting - Javascript Reading Data from TEXT AREA </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> <CENTER> Reading Data from the Text Area </CENTER></H3>
<H4> <CENTER> (Text Area behaves like a multiline Text Box)
</CENTER> </H4>
<PRE>
Please provide Some Comments about Our Web Site:
116
<FORM NAME=frmData>
<TEXTAREA NAME=txaComments ROWS=5 COLS=40> Comments:
</TEXTAREA>
<HR>
<INPUT TYPE=BUTTON VALUE="Submit Comments" NAME="cmdSubmit"

</FORM>
</PRE>
</BODY>
<HTML>
Example: Collecting Filename from File control.

<HTML>
<HEAD>
<TITLE> Client side scripting - Javascript Collecting Filename from FILE Control </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> <CENTER> Collecting File Name from FILE type INPUT Control </CENTER></H3>
<PRE>
Click on the Button to Show File Open Dialog:
<FORM NAME=frmData>
<INPUT TYPE=FILE NAME=filDatafile SIZE=50>
<HR>
<INPUT TYPE=BUTTON VALUE="Check File Name Submitted" NAME="cmdSubmit"

</FORM>
</PRE>
</BODY>
<HTML>
Example: Image type Submit button (if placed inside a form).

<HTML>
<HEAD>
<TITLE> Client side scripting - Javascript Image Type Submit Button </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> <CENTER> An Image Type SUBMIT Button </CENTER></H3>
<PRE>
Click on the Image Button Below to Find its Properties:
<INPUT TYPE=IMAGE NAME=imgPrinter WIDTH=75 HEIGHT=75 SRC=hp.jpg
onClick="imgPrinter_OnClick();">
<HR>
</PRE>
</BODY>
<HTML>
Example: Data Validation, parseInt, parseFloat, isNaN functions.


<HTML>
<HEAD>
<TITLE> Adder with Data Validation - JavaScript </TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>

</SCRIPT>
</HEAD>
<BODY>
<H1> Web Adder with Data Validation </H1>
<PRE>
<FORM NAME=frmCalc method="" action="">
Value1: <INPUT NAME=val1>
Value2: <INPUT NAME=val2>
-----------------
Result: <INPUT NAME=RESULT>
<INPUT TYPE=button NAME=cmdAdd value=+ onClick="cmdAdd_onclick();">

</FORM>
</PRE>
</BODY>
</HTML>
Example: Writing your own functions.

<HTML>
<HEAD>
<TITLE> Client side scripting Javascript - Writing your own Subs, Functions </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H2> <CENTER> Javascript Client Side Scripting </CENTER> </H2>
<H3> <CENTER> Writing Your own Functions - Finding Minimum </CENTER></H3>
<PRE>
119
Enter some numbers in the three text boxes, then Click on the
"Calculate Min" Button to Find the minimum of the three numbers entered:
<FORM NAME=frmMin>
Enter First Number : <INPUT TYPE=TEXT NAME=txtV1>
Enter Second Number : <INPUT TYPE=TEXT NAME=txtV2>
Enter Third Number : <INPUT TYPE=TEXT NAME=txtV3>
<INPUT TYPE=Button NAME=cmdMin VALUE="Calculate Minimum"

onClick="cmdMin_OnClick();">
</FORM>
</PRE>
</BODY>
<HTML>
Example: Elements collection in a form, for loop.

<HTML>
<HEAD>

</SCRIPT>
<TITLE> Javascript - User Input Examples</TITLE>

<H2>Guest Book</H2>
<H4>What do you think of our Web site? Please provide your comments.</H4>
<HR>
</HEAD>
<BODY>
<FORM NAME="frmGuestBook">
<PRE>
E-mail Address: <INPUT NAME="txtemail" SIZE=40 MAXLENGTH=40 VALUE = "">
120
Rating: <INPUT TYPE="radio" NAME="rating" VALUE="Excellent" CHECKED> Excellent

<INPUT TYPE="radio" NAME="rating" VALUE="Very Good" > Very Good
<INPUT TYPE="radio" NAME="rating" VALUE="Good" > Good
<INPUT TYPE="radio" NAME="rating" VALUE="Fair" > Fair
<INPUT TYPE="radio" NAME="rating" VALUE="Poor" > Poor
General Comments
<TEXTAREA NAME="txacomments" ROWS="5" COLS="80"></TEXTAREA>
<INPUT TYPE="button" NAME="cmdSubmit" VALUE="Submit Comments"

onClick="cmdSubmit_OnClick();"> <INPUT TYPE="reset" VALUE="Reset">
</PRE>
</FORM>
</BODY>
</HTML>
Exercise: Convert the Vbscript code in Clientsc18.htm to Javascript.
Example: Collecting a response from the user by using the confirm method
of the window object. Note that the window object also provides the alert
function (which is similar to MsgBox in Vbscript) and the prompt function
(similar to InputBox in Vbscript)

<HTML>
<HEAD>
<TITLE> confirm Function example</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> Test of the Confirm Function in Javascripts </H3>
<H2> Click on the Test Button to see Message Box </H2>
<FORM>
<INPUT NAME="cmdTestConfirm" Type="Button" VALUE="Test Confirm Function"
onClick="cmdTestConfirm_OnClick();">
</FORM>
</BODY>
</HTML>
121
Example: Use of the prompt function.


<HTML>
<HEAD>
<TITLE> Prompt function Example </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> Prompt function Example (method of the window object) </H3>
<H2> Click on the Test Button to see Prompt Box </H2>
<FORM>
<INPUT NAME="cmdTestInputBox" Type="Button" VALUE="Test Input Box"
onClick="cmdTestPrompt_OnClick();">
</FORM>
</BODY>
</HTML>
Javascript String Functions:

• Javascript uses the + operator for catenating strings.
• Often a new operator is used to create strings (although not required)
e.g., s1 = new String(“hello”);
• toUpperCase( ) converts a string to upper case, toLowerCase( )
converts a string to lower case.
• If s1 is a string, then s1.substring(2,5) returns a string starting from
the third character to the sixth character (remember start position is 0).
• s1.length( ) reurns the length of the string.
• pos = s1.indexOf(“hi”,5); will search the s1 string for the string “hi”
starting from position 6 and return its location if found.
• names = new Array(5); creates an array of strings with indices
varying from 0 to 4.
• name = “Bill Gates”; nm = name.split(“ “); will create an array of
strings where nm[0] will contain “Bill” and nm[1] = “Gates”.
•
122
Example: Use of split function.


<HTML>
<HEAD>
<TITLE> String Built-in Functions Example </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> Javascript String Function Example </H3>
<H2> Click on the Button below to do some String Processing </H2>
<HR>
<INPUT TYPE="button" NAME=cmdEnter VALUE="Test of String Functions"
onClick="cmdEnter_OnClick();">
</BODY>
</HTML>
Javascript Date and Time Functions

• Javascript measures time in milliseconds. The reference point is
1/1/1970.
• d1 = new Date( ); returns the date and time.
• Date.parse(“June 25, 1997”) returns a date object with a count of
milliseconds since 1/1/1970.
Example:

<HTML>
<HEAD>
<TITLE> Date Time Functions Example </TITLE>
123

</SCRIPT>
</HEAD>
<BODY>
<H3> Test of Javascript Date and Time Functions </H3>
<H2> Click Button to Invoke Date Time Functions </H2>
<FORM>
<INPUT NAME="cmdTestDate" Type="Button" VALUE="Test Date and Time"
onClick="cmdTestDate_OnClick();">
</FORM>
</BODY>
</HTML>
Example:

<HTML>
<HEAD>
<TITLE> Date difference Example </TITLE>

</SCRIPT>
</HEAD>
<BODY>
<H3> Test of JavaScript Date difference Capabilities </H3>
<HR>
<FORM Name=frmBday>
Please enter your Birthday :
<INPUT Name=txtBday value="">
<BR>
<INPUT NAME="cmdEnter" Type="Button" VALUE="Click to Calculate Age"
onClick="cmdEnter_OnClick();">
</FORM>
124
</BODY>
</HTML>
Example: Switch statement, onLoad event, Math functions.
<HTML>
<HEAD>

<TITLE> A Colorful Start to the Web Page </TITLE>

</SCRIPT>
</HEAD>
<BODY onLoad="window_onLoad();">
<H2> Possibly a A different Color each time the
document is loaded or refreshed </H2>
</BODY>
</HTML>
Example: Mixing Javascript and Vbscript. OnBlur event handling in

Javascript.
<HTML>
<HEAD>

<TITLE> Feedbackk on Your Shopping Experience with WebShop.com </TITLE>

</SCRIPT>
<SCRIPT Language = VBSCript>

</SCRIPT>
</HEAD>
<BODY onLoad="window_OnLoad();">
<H2> Feedback on Your Shopping Experience with WebShop.com </H2>
<H3> Please fill out the feedback form below.
Your comments are highly appreciated </H3>
<HR>
<FORM NAME="frmFeedback">
<PRE>
<B>E-mail Address:</B> <INPUT NAME="txtEmail" SIZE=35 MAXLENGTH=35 VALUE = ""
onBlur="txtEmail_OnBlur()">
<B>Your shopping Experience with WebShop.com has been:</B>
Rating: <INPUT TYPE="radio" NAME="rating" VALUE="Excellent" CHECKED> Excellent
<INPUT TYPE="radio" NAME="rating" VALUE="Very Good" > Very Good
<INPUT TYPE="radio" NAME="rating" VALUE="Good" > Good
<INPUT TYPE="radio" NAME="rating" VALUE="Fair" > Fair
<INPUT TYPE="radio" NAME="rating" VALUE="Poor" > Poor
126
<B>Would you shop again with us:</B>

<INPUT TYPE=RADIO NAME="shopagain" CHECKED VALUE=Yes> YES
<INPUT TYPE=RADIO NAME="shopagain" VALUE=No> NO
<B>General Comments</B>
<TEXTAREA NAME="txaComments" ROWS="5" COLS="60"></TEXTAREA>

<INPUT TYPE="button" NAME="cmdSubmit" VALUE="Submit Feedback"> <INPUT
TYPE="reset" VALUE="RESET">
</PRE>
</FORM>
</BODY>
</HTML>

An Object Based Scripting Language Similar in Concept To

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

An Object Based Scripting Language Similar in Concept To

Uploaded by

Copyright:

Available Formats

110

• Use \n instead of VbCrLf or Chr(13) to put a string on the

Example: if statement, reading data from check boxes, “\n”

Example: for loop, arrays in Javascript [ ], reading data from option

<INPUT TYPE=BUTTON VALUE="Submit Dinner and Dessert Choices" NAME="cmdSubmit"

Example: “\t”, reading data from a drop down list box.

strFruit = window.frmData.ddlFruit.value + "\n" ;

Example: Reading data from a list Box.

<INPUT TYPE=BUTTON VALUE="Submit Fruit Choices" NAME="cmdSubmit"

Example: Reading data from Text Area. Continuing on multiple lines.

<INPUT TYPE=BUTTON VALUE="Submit Comments" NAME="cmdSubmit"

Example: Collecting Filename from File control.

<INPUT TYPE=FILE NAME=filDatafile SIZE=50>

<INPUT TYPE=BUTTON VALUE="Check File Name Submitted" NAME="cmdSubmit"

Example: Image type Submit button (if placed inside a form).

Example: Data Validation, parseInt, parseFloat, isNaN functions.

/* -------------- Read and validate value 2 */

<INPUT TYPE=button NAME=cmdAdd value=+ onClick="cmdAdd_onclick();">

Example: Writing your own functions.

function cmdMin_OnClick(){ //Event handler for the Calculate Minimum Button

<INPUT TYPE=Button NAME=cmdMin VALUE="Calculate Minimum"

Example: Elements collection in a form, for loop.

<TITLE> Javascript - User Input Examples</TITLE>

Rating: <INPUT TYPE="radio" NAME="rating" VALUE="Excellent" CHECKED> Excellent

<TEXTAREA NAME="txacomments" ROWS="5" COLS="80"></TEXTAREA>

<INPUT TYPE="button" NAME="cmdSubmit" VALUE="Submit Comments"

Exercise: Convert the Vbscript code in Clientsc18.htm to Javascript.

Example: Use of the prompt function.

Javascript String Functions:

Example: Use of split function.

Javascript Date and Time Functions

Example: Mixing Javascript and Vbscript. OnBlur event handling in

alert("You must not leave E-mail blank");

If Trim(strMail) = "" Then

<B>Would you shop again with us:</B>

<TEXTAREA NAME="txaComments" ROWS="5" COLS="60"></TEXTAREA>

You might also like