Javascript

The fundamental client side scripting language for the web.
It can be used to

check the format or content of the input tags in a form.
perform calculation on data on a form.
create window for display web pages and data
create Dynamic HTML (DHTML)web pages, i.e., modify the content of the web page based on user's action (selection)

animation
popup dialog box or description
Note that IE5 and Navigator supports different DHTML features and extended tags.

Originally developed by Netscape, called livescript.
Read chapters 1-3 of Javascript User Guide.
Javascript User Guide
Javascript 1.2
Javascript Object Model document

W3C Document Object Model

Javascript Reference Manual
Microsoft JScript, http://msdn.microsoft.com/scripting/
DHTML tutorial at webreview: http://www.webreview.com/pub/98/09/11/coder/index.html
Webmoney's DHTML tutorial: http://hotwired.lycos.com/webmonkey/authoring/dynamic_html/tutorials/tutorial1.html
There are zip files of these documents in ~cs301/public_html/js

You can also obtain them from http://developer.netscape.com/

Javascript Client Side Object Hierarchy

We use dotted notation to refer the javascript object in a web client.
For example,

docuement.forms[2] refers to the third form in the web page.
win.document.bgColor refers to the bgColor of a window referenced by win.It could be a win returned from window.open() call.
document.forms[0].elements[1].value will refer to the second elements of the first form. Note that there is no document.forms[0].text[1].
If the element are given names, then document.myform.counter.value can be used, where myform and counter are names of a form and text input tag.

See the props.html and showFormObj.html in the example directory.

Navigator's Object Arrays

Some Navigator objects have properties whose values are themselves arrays. These arrays are used to store information when you don't know ahead of time how many values there will be. The following table shows which properties of which objects have arrays as values.

Table 3.2 Predefined JavaScript arrays

Object Property Description

document

anchors
Reflects a document's <A> tags that contain a NAME attribute in source order

applets
Reflects a document's <APPLET> tags in source order

embeds
Reflects a document's <EMBED> tags in source order

forms
Reflects a document's <FORM> tags in source order

images
Reflects a document's <IMG> tags in source order (images created with the Image() constructor are not included in the images array)

links
Reflects a document's <AREA HREF="..."> tags, <A HREF=""> tags, and Link objects created with the link method in source order

Function

arguments
Reflects the arguments to a function

Form

elements
Reflects a form's elements (such as Checkbox, Radio, and Text objects) in source order

select

options
Reflects the options in a Select object (<OPTION> tags) in source order

window

frames
Reflects all the <FRAME> tags in a window containing a <FRAMESET> tag in source order

history
Reflects a window's history entries

navigator

mimeTypes
Reflects all the MIME types supported by the client (either internally, via helper applications, or by plug-ins)

plugins
Reflects all the plug-ins installed on the client in source order

Object	Property	Description
document	anchors	Reflects a document's <A> tags that contain a NAME attribute in source order
applets	Reflects a document's <APPLET> tags in source order
embeds	Reflects a document's <EMBED> tags in source order
forms	Reflects a document's <FORM> tags in source order
images	Reflects a document's <IMG> tags in source order (images created with the Image() constructor are not included in the images array)
links	Reflects a document's <AREA HREF="..."> tags, <A HREF=""> tags, and Link objects created with the link method in source order
Function	arguments	Reflects the arguments to a function
Form	elements	Reflects a form's elements (such as Checkbox, Radio, and Text objects) in source order
select	options	Reflects the options in a Select object (<OPTION> tags) in source order
window	frames	Reflects all the <FRAME> tags in a window containing a <FRAMESET> tag in source order
history	Reflects a window's history entries
navigator	mimeTypes	Reflects all the MIME types supported by the client (either internally, via helper applications, or by plug-ins)
plugins	Reflects all the plug-ins installed on the client in source order

Javascript Event Handlers

Event	Applies to	Occurs when	Event handler
Abort	images	User aborts the loading of an image (for example by clicking a link or clicking the Stop button)	onAbort
Blur	windows and all form elements	User removes input focus from window or form element	onBlur
Change	text fields, textareas, select lists	User changes value of element	onChange
Click	buttons, radio buttons, checkboxes, submit buttons, reset buttons, links	User clicks form element or link	onClick
DragDrop	windows	User drops an object onto the browser window, such as dropping a file on the browser window	onDragDrop
Error	images, windows	The loading of a document or image causes an error	onError
Focus	windows and all form elements	User gives input focus to window or form element	onFocus
KeyDown	documents, images, links, text areas	User depresses a key	onKeyDown
KeyPress	documents, images, links, text areas	User presses or holds down a key	onKeyPress
KeyUp	documents, images, links, text areas	User releases a key	onKeyUp
Load	document body	User loads the page in the Navigator	onLoad
MouseDown	documents, buttons, links	User depresses a mouse button	onMouseDown
MouseMove	nothing by default	User moves the cursor	onMouseMove
MouseOut	areas, links	User moves cursor out of a client-side image map or link	onMouseOut
MouseOver	links	User moves cursor over a link	onMouseOver
MouseUp	documents, buttons, links	User releases a mouse button	onMouseUp
Move	windows	User or script moves a window	onMove
Reset	forms	User resets a form (clicks a Reset button)	onReset
Resize	windows	User or script resizes a window	onResize
Select	text fields, textareas	User selects form element's input field	onSelect
Submit	forms	User submits a form	onSubmit
Unload	document body	User exits the page	onUnload

Operation of Javascript and when Javascript Client Side objects start to exists

When the browser reads and parses the javascript in the head section, it saves them into window.<function_name>.
The objects in a document, such as the form, input tag, textfields, are created when they are read and parsed in the <body> section.
Before they are created, we can not reference them in javascript function execution.
We can however reference them in the function declaration such as those declared in the <script> section of the <head> section.
A common mistake and a tricky bug of Javascript creation is that the object is referenced before they are created or after they are dismissed.
For example:

<body>

</form></body>

Examples

hellowin.html: show how to create a separate window and add additional text to the window.
add1.html: show + can be interpreted as concatenation or arithmetic operator depending on the first operand. Use parseInt() to make the operand an integer. This is a common mistake.
props.html: show how to display the predefined objects in a document.
showFormObj.html: show how to display the objects in a form.
factorial.html: show how to generate web page (table) content using a javascript function.
fac4.html: show how to generate factorial table dynamically by selecting the range of parameters in a form. The table is displayed in a separate window.
clock.html: clock display, get current time in the realtime clock and set timer to refresh it.
date.html: show how to use the date object and compute the time between two dates.
bgcolor.html: show how to change background color of a web page and set timer to change in different colors every second.
regex.html: show how to check the number of input text field.
checkPhoneNo.html: show how to check phone number using regular expression when user enters data.
checkPhoneNoOnClick.html: show how to check number when user clicks the submit button.
checkPhoneNoError.html: show how to debug a web page with incorrect javacript, e.g. missing ending ', )
The IE status bar will show "error on page" click on the warning symbol or ie icon will bring up the dialog box displaying the line and char position that cause the error.
parseDate.html: show how to use regular expression in javascript to parse a date.
jsatt2.html: show how the javascript can be used to disguise the system problem and steal the user's password. Hint: use hidden field.
slide3.html: A slide show of flowers with each slide moving in from left. Use layer tag (a dynamic HTML and HTML 4.0 feature) and settime. Flower picture files from Netscape Dynamic HTML workshop June 97. It was modified to work on both IE6 and NS7.2 using getElementById().
fish1.html: A demo of a fish swim zig-zag through a set of poles. Use layer and animated gif.
fish2.html: A revision that works on both IE5 and NS4 browser.
dhtmlSetLink.html: example of dynamic html web page that works on both navigator and IE5.
popup.html: example of dynamic html web page, that pops up more detailed description, or division with form for search web page. It utilizes DOM and CSS features. On IE5, it also demonstrates alpha plane graphic usage.
Treemenu.html: example of dynamic html web page that organize web pages as a tree structure that opens and collapses according to user's selection.
calculateOrder.html: example of calculating the total price of a cookie order. It demonstrates loop, DOM, checking if a number is a nature number, and alert().
jscatalog.cgi: this CGI scripts test the input on the purchase items and calculate the total price. It adds id attribute in the TD tag with the price info, and retrieves the price in the javascript using getElementById().

Debug Javascript

When download or run a web page with javascript error, IE shows a warning sign right at the bottom status window. Just click on the triangle warning sign. A dialog box will appear showing the error message including the line number, character position, and error type.
For example http://sanluis.uccs.edu/~cs401/cgi-bin/jscatalogErr.cgi shows an errror with unterminated string constant. If there are multiple errors in the web page, click Next or Previous to see other errors.
For older versions of browsers you can try to type javascript: into the url box. Netscape Navigator and Internet Explorer both give the same direction when the javascript error occurs. It indicates the error type and line number.
Tools for debugging Javascript: Netscape JSDebug, Visual Javascript, MS Javascript Debugger