Java Script Demos
How to trigger action
Events list
Document Object Model
Events demo
Useful actions
More Demos
Reuseable structures
Brief Syntax reference
Standard JS Objects
Window & Document Objects
Other Html tags and properties
Events demo
The following demos test many useful events.
Most display a message in the browser status bar.....
Try DOCUMENT - Blur, Focus, Load, Unload, Error ....
Try LINK mouse Over, Out, Down, Up, Click,
Try FORM FIELD Focus, Blur, KeyPress, KeyUp .....
Try IMAGE MouseDown, MouseUp .......
Note: * Use a "thumbnail image" as a link to a new page with a larger image.
Useful Actions
Here, a single event - mouseOver - is used to trigger
a wide variety of useful actions....
Timer to animate images
MouseOver to - START - image animation
Why don't images reload ???
MouseOver to - STOP - image animation
MouseOver to - START - 5 second timer
MouseOver to - STOP - 5 second timer
Examine tag or attribute values .
MouseOver to see document.title
MouseOver to see form field content
Change tag or attribute values.
MouseOver to reset form data above
MouseOver to change document background to silver
MouseOver to remove image border above
Validate forms ...... See FormValidationJS.Html for full details.
Communicate with the user .....
You cannot use write or writeln AFTER the page is loaded,
unless you first open a new browser window.
MouseOver to alert
Why don't the following 2 demos display window.status in Netscape 4.7 ????
MouseOver to confirm
MouseOver to prompt
Use a form textArea to display messages to user ......
MouseOver to display message in textArea
MouseOver to tell user where a link will go
MouseDown to confirm user wants to load a large image file (to new page)
Direct user action by highlighting .........
Why doesn't this work ??
MouseOver to make Table red
Or by placing the cursor on a form field .....
Why not working in Explorer 5.0 ????
MouseOver to focus field 1
MouseOver to focus field 2
Delaying or denying a user's request to link out of the page.....
Click blocked link
Handle errors .........
Click to test an invalid link
No way to trap this error ??
Control the browser .......
Click to open new document
You could also ........
* Ask the browser (which is running your JS code) for its version number,
what kind of computer operating system you're loaded in, and much more.
( We did this as you loaded this page.)
* It's even possible to use Java Script to generate ALL the Html right there in the client's browser.
So you could only generate code that you know will work on the current OP system and browser!
More Demos
MouseOver to run these demos coded in Head .....
NaN = Not a Number
Array handling
Date functions
Math functions
String handling
View Document arrays[]
WITH (object)
History - back
Location info
Window control
Reuseable Structures
function functionName()
{
;
return;
}
if ()
{
;
}
if ()
{
;
}
else
{
;
}
switch ()
{ case :
;
break;
case :
;
break;
default:
;
} // end switch
while ()
{
;
} // break , continue (next)
do {
;
}
while (); // break , continue (next)
for (init; test; update)
{
;
} // break , continue (next)
for (variable in object)
{
;
} // break , continue (next)
with(objectName)
{
;
}
// saves repeating object name
How to trigger action
Java Script that is coded "in line" - within the Html head or body but NOT within a JS function definition - is immediately executed as the Html file is loaded.
JS that is coded inside a function definition is executed later if and when called.
Function calls, and other JS actions, are initiated by "onEvent" triggers which are embedded inside Html tags like this.....
(tagName onEvent = " functionName (parameters) ; " ) ... calls a JS function
(tagName onEvent = " attribute = ' newValue ' ; " ) .... changes the current tag attribute
(tagName onEvent = " tag.attribute = ' newValue ' ; " ) .... changes another tag's attribute
In all 3 examples above, the double quotes enclose a valid JS statement, which is always ended with a semicolon. The quotes could in fact contain several JS statements.
Events list
Any event can be used to trigger any JS action,
although some combinations are more useful.
I tried to test all these in Netscape 4.7 and Explorer 5.0.
Those marked with * worked in both.
Event Valid in tag... Means (Possible usage?)....
onAbort (img) Loading interrupted
onBlur * (body = document) Window has been de-selected
* (form) + (Text, ) Element de-selected
(TextArea, Select)
onFocus * (body= document) Window is now selected
* (form) + (T,TA,Sel ) Element selected
onChange (form) + (T,TA,Sel ) Value of element changed
(select) + (option ) Menu changed
onClick * (a href = link) Down and up
(button) ""
onDblClick (button) ""
(body? = document) ""
(img) ""
onError (img) Can't load
(body=document)
onKeyDown (form) + (input) ?
(.... following 2 events detectable in Explorer ...)
(.... only if form field is selected first ...)
onKeyPress * (form) + (input) ?
onKeyUp * (form) + (input) ?
onLoad * (body) Window content is loaded
(img) Image is loaded
onUnLoad * (body)
(img) How?
onMouseDown * (a href = link) Mouse pressed down
* (img) ""
(? document) ""
(button) ""
onMouseUp * (a href = link) Mouse released
* (img) ""
(? document) ""
(button) ""
onMouseOver * (a href = link) Mouse placed over
(img) ""
(area) ""
onMouseOut * (a href = link) Mouse moved off
(img) ""
(area) ""
onReset (form) User clicked reset button
..( confirm this !! )
onSelect (form) + (T,TA,Sel)
onSubmit (form) User clicked submit button
Document Object Model
JS can be used to examine or change any Html tag attribute. There are 2 basic ways to specify which attribute to access....
By assigning your own unique name to each tag you wish to reference with JS later, EG...
( tagName name=" uniqueName " )
Or you can use the generic name that is automatically predefined for many tags as the Html file loads. These predefined names make each tag programatically accessible as an "object" - some with predefined "methods" that you can call and use. These objects "model" the document as follows.......
<<..... Window ....>>
(assumed)
V V V V V
V V V V V
Document Frame[] Location History Navigator
(HTML body) (doc URL) (back, fwd) (browser name...)
V V V
V Plugin Mime-type
V
Anchor[] (a href links)
Applet[]
Area[]
Image[]
Layer[] (old way to position page elements)
Link[] (to external CSS files)
Plugin[]
Form[] -------->Button
Checkbox
File (upload)
Hidden
Password
Radio
Reset
Select ---------> Option
Submit
Text
TextArea
Think of this as a system for addressing mail, with "Document" = the country, "Anchor, Applet..." =the state, and "button, Checkbox.." = individial cities. To send mail, you have to specify all 3 pieces of information, with the country first, then state, then city - separated by a decimal point.
Let's assume you have the following Html form ...
(form name="myForm")
(input type="text" name="textField1" )
You can extract the field's content (or any tag's attribute"value" )
with any of these JS statements....
X = document . myForm . textField1 . value ;
X = this . myForm . textField1 . value ;
X = document . form . textField1 . value ;
X = document . form[0] . textField1 . value ;
X = document . myForm . elements[0] . value ;
To change the value, simply turn the statement around .....
document . myForm . textField1 . value = X ;
After executing this statement, the browser automatically refreshes the screen.
Syntax reference
This reference list only the most commonly used syntax.
---------- Std JS functions --------------
isNaN(string) Not a number (0-9?)
encodeURI(string) Replaces space with %20, etc.
parseFloat(string)
parseInt(string)
variable . toString()
object . valueOf()
(others...)
---------- Operator precedence --------------
() []
! -var ++ -- (logical not, negate, increment)
* / % (% = modulus = divide and return remainder)
+ -
< > <= >= (compare)
== !=
&& || (logical and, or )
= (assign)
+= -+ *= /* %= (shortcuts)
---------- Special chars ( escape sequences)--------------
\n new line - CR + LF
\t tab
\' single quote
\" double quote
(others...)
--------------------------------------------------------------------------------
Objects, properties, and methods
Objects provide much of the power of JS.
Any property (variable) listed below can be accessed or changed.
Methods provide "ready to call " functions .
----- Std JS Objects List-----
Array create
Boolean create
Date manipulation
Error returns info
Function creates as object
Global JS built in methods
Math calculations
Number manipulating
Object common functions for std JS objects
RegExp find & replace text in strings
String manipulating
Window & Document Objects
These have a heirarchical structure, listed here ALPHABETICALLY.
See structural chart elsewhere in this doc.
Note that in some cases (anchor[], applet[], ...) the object name is singular,
but the property name (document.anchors[], etc.) the name is plural.
document . ANCHOR[] array lists your (a href) links
document . APPLET[]
document . AREA[]
document . form[] . BUTTON
document . form[] . CHECKBOX
DOCUMENT your Html file
document . form[] . FILE to upload to server
document . FORM[]
FRAME []
document . form[] . HIDDEN
HISTORY back, forward
document . IMAGE[] lists your images
document . LAYER[] old way to position page elements
document . LINK[] to external Css files
LOCATION where your Html came from
navigator . MIMETYPE
NAVIGATOR browser name, version
document . form[] . select . OPTION
document . form[] . PASSWORD
document . PLUGIN
navigator . PLUGIN
document . form[] . RADIO
document . form[] . RESET
document . form[] . SELECT
document . form[] . SUBMIT
document . form[] . TEXT
document . form[] . TEXTAREA
WINDOW the top object, name assumed
Other Html Tags & Properties
Only commonly used tags and attributes are listed.
Most attributes should be accessible by JavaScript.
Tag Attributes (ALL CAPS = REQUIRED)
-ALL- id class style
a href name target
applet height width
body background bgcolor text
button name type value
div align
font color face size
form ACTION method name target
h1-6 align
head
hr align size width
img align ALT border height SRC width
input (varies with type)
li value
meta CONTENT name
p align
script language src TYPE
select multiple name size
span
textarea COLS name ROWS
table align bgcolor border cellpadding cellspacing width
tr align bgcolor valign
td align bgcolor colspan height rowspan valign