JMR's

JavaScript / HTML Help Notes

. . . . . . . . . . . . . . . PAGE INDEX . . . . . . . . . . . . . .

IMPORTANT

Browser Object Model Link

Code Samples Link

Typing Shortcuts Link

JavaScript Escape Sequences Link

Links Link

IMPORTANT

    WHILE LOOPS

    There is only one form of the while loop. It is the pre-test loop.
    There are also some DO NOTS:

DO NOT use a string in the condition statement
(convert the values to numbers for testing the condition)
DO NOT nest while loops

This is the only valid form of a while loop in JavaScript:

    while (NumericValue == NumericValue){
        //do whatever

    }

Return To Index

Typing Shortcuts

with (document) {

writeln("This is line one of my text.");

writeln("This is line two of my text.");

writeln("This is line three of my text.");

}

var w = "document.writeln";

w("This is line one of my text.");

w("This is line two of my text.");

w("This is line three of my text.");

Return To Index

Using Frames

Do not use a <BODY> tag when using a frameset (frames).

Return To Index

Forms

The <FORM>...</FORM> tag pair designates a form within an HTML document and

contains all text and tags that make up a form.

● Multiple FORMS are O.K.

● FORMS cannot be nested!

There are three tags used to create FORM elements:

● <INPUT>

● <SELECT>

● <TEXTAREA>

Example:

To access that textbox with JavaScript, use:

"document.textBoxOne.value = "new value";

Attributes of the <INPUT> tag.

ALIGN Image alignment.

CHECKED Radio button or Check box selected if true.

MAXLENGTH Max. number of characters that can be entered into the field.

NAME Identifier

SIZE Integer value that represents the number of characters wide a text field will be.

SRC Specifies the URL of an image.

TYPE Specifies the type of input element to be rendered.

Valid Types:

"text"

"checkbox"

"button"

"password"

"radio"

"reset"

"image"

VALUE Sets an initial value on a field or a label for buttons.

The <SELECT> tag:

The <SELECT> tag creates a selection list that presents user with fixed lists

of values from which to choose.

Attributes of the <SELECT> tag.

MULTIPLE Specifies whether a user can select more than one item from the list.

NAME Designates a name for the selection list.

SIZE Determines now many lines of the selection list appear.

The <OPTION> tag:

<OPTION> tags placed between the selection list's <SELECT>...</SELECT> tag pair,

specify the items that appear in a selection list. Lists frequently use attributes of

the <OPTION> tag.

Attributes of the <OPTION> tag.

LABEL Designates alternate text to display in the selection list for an individual option

SELECTED An optional attribute that determines if an item is initially selected in

the selection list when the form first loads.

VALUE The value submitted to a CGI script

The FORM object contains two methods:

●submit( )

● reset( )

Return To Index

General JavaScript / HTML Notes

● Use relative path names for all links

● Always use the four letter (*.html) extension because some Web Servers require it

● Use the <BODY>...</BODY> tags within the <NOFRAMES>...</NOFRAMES> tags

● The JavaScript "return" statement is a good way to exit a function when some required data

is not in valid format. It can be used in combination with an alert and a focus( ) statement

for reasonable data validation handling.

● Fully realize that Netscape Navigator and Internet Explorer, along with all of

their past versions, do not support the same HTML/JavaScript elements. A

significantly different version of the page may need to be made for each.

Return To Index

JavaScript Escape Sequences

\b = Backspace \t = Horizontal tab

\f = Form feed \' = Single quotation mark

\n = New line \" = Double quotation mark

\r = Carriage return \\ = Backslash

Return To Index

Using Arrays

Note: The number of elements in an array is always dynamic. If you say "access element 10" and there

is none, the array will be automatically increased to that size (even if the number of elements is stated

in the line that creates the array).

Create an array:

depts = new Array( );

depts[0] = "Accounting";

depts[1] = "Programming";

Get the current number of array elements:

var numElements = depts.length;

Return To Index

Working With Strings

String Object Methods:

blink ( ) → Adds a <BLINK>...</BLINK> tag pair to a text string.

charAt ( index ) → Returns the character at the specified position in a text string. Returns

nothing if the specified position is greater than the length of the string.

indexOf ( text, index ) → Returns the position number in a string of the first character in the text

argument. If the index argument is included, then the indexOf ( ) method

starts searching at that position within the string. Returns -1 if the text is

not found.

lastIndexOf ( text, index ) → Returns the position number in a string of the last instance of the

first character in the text argument. If the index argument is included,

then the lastIndexOf ( ) method starts searching at that position within

the string. Returns -1 if the character or string is not found.

substring ( starting index, ending index ) → Extracts text from a string starting with the position

number in the string of the starting index argument

and ending with the position number of the

ending index argument.

Using the String Object Methods:

Note the odd usage here.

var oldString = "Some text.";

var newString = oldString.toUpperCase( );

Return To Index

Event Handling

Example:

<A HREF="greenPage.html"

onClick = "return confirmPageChange( );"

onMouseOver = "status= ' This link opens the green page' ;

return false;"

onMouseOut = "status = 'You did not open the green page!!' ;

return true;">

Click here to open the green page</A>

Return To Index

Browser Object Model

				Window
--------\|------	---	-------\|------	----	----------\|------	--	---------------\|---------	----\|
Document		Frame[]		Location		History	Navigator
\|							\|
Form[]	---	Textarea					Plugin
Plugin[]		Text					Mime Type
Applet[]		FileUpload
Anchor[]		Password
Area[]		Hidden
Image[]		Submit
Links[]		reset
Layer[]		Radio
		Checkbox
		Button
		Select	----	Options[]

Return To Index

Code Samples

CODE SAMPLES

USING isNaN( )

********************************************************

function someFunction( ) {

// var "one" needs to be a number for this application

var one=document.ageDeterminer.userBirthMonth.value;

var validity;

validity = isNaN(one);
if(validity) {                                                                            // var "one" is not a number if true
    window.alert("Please enter a number for the months.");        // so alert user
    return document.ageDeterminer.userBirthMonth.focus( );    // set focus to form field to change

} // end if

} // end someFunction

USING External Cascading Style Sheets

***************************************************************

There are two methods for referring to external cascading style sheets. Linking, and Importing.

General Note: Be sure the documents using the style sheet(s) have end tags wherever possible,

such as </P> and </LI>.

Linking:

Note: Only one cascading style sheet page can be linked to a document.

<HEAD>

</HEAD>

Importing:

Note: More than one cascading style sheet can be imported into a document, but

importing style sheets is only supported by Internet Explorer 4.0.

<STYLE>

@import (http://pathname/stylesheet.css);

</STYLE>

USING File Links

***********************************************************************

anonymous FTP Link (ftp://):

Login FTP Link:

Note: "It is highly recommended that you never include both the user name and password to a server

within an HTML document."

Note: "By default, the requested file is transferred in binary format. To specify that hte document

should be transferred as an ASCII file, add ;type=a to the end of the URL.

Here are a couple of other examples of FTP links:

Other Links

File:

file://server/path -- Specifies a file without indicating the protocol. This is useful for

accessing files on a contained site such as a CD-ROM or kiosk

application, but is less appropriate over networks (such as the Internet).

Telnet:

telnet://user:password@server:port/ -- Opens a telnet session with a desired server.

The user and password@ elements are optional and follow the same rules

as described for ftp://.

Gopher:

gopher://server:port/path -- Accesses a document on a gopher server. The gopher

document retrieval system was exlipsed by the WWW, but some gopher

servers are still operating.

USING Sounds

********************************************************************

Example: This will play the "ding.wav" on the push of a button.

<INPUT TYPE="button" NAME="tryToCalcAge" VALUE="Calc Age"

TABINDEX=4 onClick="document.audio.play(); testValidity();">

Return To Index

Links

Return To Index

Glossary

Dynamic Typing is another phrase for loosely typed, and means you do not have to declare a

data type for a variable.

Parsing refers to the act of extracting characters or substrings from a larger string.

Reference or Composite are data types which are collection of data represented by a single variable name.

JavaScript has three reference data types: functions, objects, and arrays.

Return To Index

Books

Web Design In A Nutshell: A Desktop Quick Reference, Jennifer Niederst,

1999, O'Reilly & Associates, Inc. (Should buy.) ISBN: 1-56592-515-7

JavaScript: The Definitive Guide, David Flanagan,

1998, O'Reilly & Associates, Inc. (Should buy?) ISBN: 1-56592-392-8

Return To Index