1 JavaScript csc667/867 Spring 2006 Ilmi Yoon. 2 Outline Basics of JavaScript, History Basics of the language variables, types, arrays, objects, and functions

1

JavaScriptJavaScriptcsc667/867csc667/867Spring 2006Spring 2006

Ilmi YoonIlmi Yoon

JavaScriptJavaScriptcsc667/867csc667/867Spring 2006Spring 2006

Ilmi YoonIlmi Yoon

2

Outline

• Basics of JavaScript, History• Basics of the language• variables, types, arrays, objects, and

functions

• operators, expressions, strings, and statements

• Some simple examples

• JavaScript Full Reference at http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/

3

What is JavaScript•JavaScript is a “simple”, interpreted,

programming language with elementary object-oriented capabilities

•JavaScript has two distinct but overlapping systems

–client-side JavaScript runs on Web browsers–server-side JavaScript runs on Web servers

•Syntactically JavaScript resembles C, C++, Java

•JavaScript was developed by Netscape (formerly called LiveScript)

4

What JavaScript Programs Can Do

•Write programs to perform any computation; it is equivalent in power to a general purpose programming language

•Control Web page appearance and content (this is its intended use)

•Control the Web browser, open windows and frames

•Interact with document content•Retrieve and manipulate all hyperlinks•Interact with the user•Read/write client state with cookies

5

Short History of JavaScript

• Released in 1996 with Netscape 2• Originally called LiveScript• MS releases Jscript with IE 3.0

– Unreliable and buggy• 1997 dHTML is born with Version 4.0

browsers. Web Programmers strike it rich.

6

Short History of JavaScript

• 1999 begin to see versions of W3C Dom guidelines implemented in versions of JavaScript and Jscript

• Netscape and Open Source Community drop old Netscape core to develop first browser to meet W3C DOM guidelines

• Most new browsers now support W3C Dom

7

Common Uses of JavaScript

• Client Side– Image Rollovers (most common)– Form Validation

http://www.papiowines.com/contactus.asp

– Dynamic Form Generationhttp://www.robertmondavi.com/Wheretobuy/

– DHTMLhttp://www.bart.gov

– Browser Detection

• Server-Side

8

Dynamic HTML• An integration of JavaScript, Cascading Style

Sheets, and the Document Object Model. – Most common type is drop down menus– Created by accessing an html elements style sheet

and changing its visibility

9

What is DOM?• Document Object Model (DOM)

– “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – from w3c.org

10

Debugging your script• Most common way

– alert();• Better way

– Use Firefox, Netscapetype javascript: in the location bar and you will go to JavaScript console

• Real Debugging– Go to Microsoft and download script

debugger. User Beware….

11

Adding JavaScript to HTML

• Inline<script language=“JavaScript”><!—Hides script from old browsers

Code goes here//<script>

• External File<script language=“JavaScript” src=“file.js” ></script>

12

JavaScript is Embedded in HTML<HTML><HEAD></HEAD><BODY><SCRIPT LANGUAGE=”JavaScript”>//the Javascript here produces content for the BODY on loading</SCRIPT></BODY></HTML>

Deferred Script<HTML><HEAD><SCRIPT LANGUAGE=”JavaScript”>//the Javascript here creates functions for later use </SCRIPT></HEAD><BODY></BODY></HTML>

13

JavaScript Object Hierarchyself, window, parent, top

plugins[ ]navigator

mimetypes[ ]frames[ ]

location forms[ ] elements[ ]CurrentWindow history anchors[ ] buttons

checkboxesdocument links[ ] fileUpload

hiddenpackages images[ ]

passwordradio

applets[ ] resetselect

optionsembeds[ ] submit

Java packages textJavaClass objects textarea

14

JavaScript Built-in Objects and HTML Tags

Object HTML Tag Object HTML Tag

window N/A button <INPUT TYPE=”button”

frame <FRAME> checkbox <INPUT TYPE=”checkbox”

history N/A hidden <INPUT TYPE=”hidden”

location N/A password<INPUT TYPE=”password”

document <BODY> radio <INPUT TYPE=”radio”

form <FORM> reset <INPUT TYPE=”reset”

select <SELECT> submit <INPUT TYPE=”submit”

textarea <TEXTAREA> text <INPUT TYPE=”text”

link <A HREF=””> anchor <A NAME=””>

navigator N/A

15

Key Objects

• Document object is responsible for all content on a page contains all the user interface elements of a page

• Window object represents a browser window or frame. This is the top-level object for each

document,Location, and History object group. • Frame object • Location object• History object• Form objects can contain user interface

elements for user input• Button objects include a button, submit and

reset buttons

16

JavaScript - The Basics

• JavaScript is case-sensitivesum, SUM and Sum are 3 different identifiers

– HTML is NOT case-sensitive

• JavaScript ignores spaces, tabs, newlines• Semicolon is optional

– but multiple statements on a line require a semicolon

i = 1; j = 2

• C and C++ style comments are supported

//comment to end of line

/* this can be a

multiple line comment */

17

JavaScript Literals• Literals

– numbers, strings, true, false, null

• All numbers are treated as floating point

base10 [-](1-9)(0-9)*

base8 [-]0(0-7)*

base16 [-]0(x|X)(0-9|a-f|A-F)*

float [(+|-)][digits][.digits][(E|e)[(+|-)]digits]

• There are special numerical constants

Number.MAX_VALUE, Number.MIN_VALUE,

Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY

18

String Literals• Any sequence of zero or more

characters enclosed within single or double quotes

• Examples– ‘a single quoted string’– “a double quoted string”– “”– “alert(‘Please Click OK’)”

19

JavaScript Data TypesType Example DescriptionString “a string” a series of characters inside

quote marksNumber 123.45 Any number not

inside quote marksBoolean true a logical true and falseNull null completely devoid of any

value, not a number, not a string, different than 0

in C/C++Object all properties and methods

belonging to the objectFunction a function

20

JavaScript Arrays and Objects•Arrays

–one dimensional, indexed from zero–array elements can contain any type of data

including references to other arrays, to objects, to functions

–array elements can have different types

•Objects–a collection of data where each item has a name–e.g. document has a property images array whose

elements have properties width and height, e.g. document.images[i].width

21

Arrays •Elements are normally accessed using []

arr[0] = 1;

arr[arr[0]] = 2;•Arrays in JavaScript are sparse

arr[0] = 1; arr[10000] = “a string”;

only 2 indices are allocated•Arbitrary expressions are permitted in []

frames[i*j+12]

document.frames[i].elements[j++]•Even expressions that evaluate to a string

document[“lastModified”]

22

Array and Objects

•Objects and arrays are really identicaltypeof(array) = typeof(object) = object

typeof() returns a string which is the type of its argument (“number”, “string”, “boolean, “object”, “function”, “undefined”)•Object elements are accessed using dot (.)•An object/array on the left requires a field name on the right of dot

document.lastModified

frames[0].length•The dot operator can be used with arrays

arr[1] is identical to arr.1but if i = 1, arr[1] is not equivalent to arr.i since

property names are not evaluated

23

Variables and Data Types

• JavaScript is a loosely typed language– Data types are converted during

execution as needed– Data typing only matters during

operations• “6” + “67” = “667” String• 6 + 67 = 73

24

Variables and Data Types

• Numbers– Integer and floating-point numbers.

• Booleans– True or false. Can not use as 1 or 0 but 0 = false;

• Strings– Anything surrounded by “” or ‘’

ex. “My String” = ‘My String’• Object

– myObj = new Object();• Null

– Not the same as zero - no value at all. • Undefined

– The Variable has been created but no value has been assigned to it

25

Scope• Is the following code valid?

for(var i = 0; i < 10;i++){document.write(i);

}alert(i);

26

Scope• Is the following code valid?

for(var i = 0; i < 10;i++){document.write(i);

}alert(i);

• YES! Scopes only happens within functions

27

Scope• var myInt = 0 //Global Var

function foo(){var i = 10; //local variablemyInt += i;

}document.write(i); //will cause error

28

Operators• Arithmetic (the usual suspects)

– +,-,*,/,%,--,++• Comparison

– ==, !=, >, >=, <, <=• Boolean

– &&, ||, !

29

Statements• Conditionals

– if(x < 0){alert(“x is negative”);

}else{alert(“x is positive”);

}– switch(favoriteProf){

case “Yoon”: statements;

break; case “Lank”: statements; break; default: statement;}

30

Statements• Loops

– for(var i =0; i < myArray.length;i++){document.write(i);

}– do

{ statements;} while (condition)

– while(condition){statements;

}

31

Functions• The function definition is a statement

which describes the function: its name, any values (known as "arguments") which it accepts incoming, and the statements of which the function is comprised. – function funcName(argument1,argument2,etc) {

statements; }

32

Functions• Example:

function foo(myString){document.write(myString);

}

foo(“Computers are fun”);foo(); //will this work?

33

Functions• When calling functions, JavaScript will

try to match the function with same number of arguments

• Previous example would work but the argument myString would be undefined.

34

JavaScript Objects• To declare an object

var myObj = new Object();• To set properties

myObj.name = “blah”• Setting methods

myObj.foo = foo;

35

JavaScript Objects• Prototype an object

function petDog(name,breed,year){this.name = name;this.breed = breed;this.year = year;

}var myDog = new petDog(“rusty”,”mutt”,1990);

36

Date: Browser Output

37

Using alert(), confirm(), and prompt()

<HTML><HEAD><TITLE>Example of alert, confirm, prompt</TITLE>

<SCRIPT LANGUAGE=JavaScript>function alertUser() { alert("An alert box contains an exclamation mark");}function confirmUser() {var msg = "\n please confirm that you want\n" + "to test another button?";if (confirm(msg))

document.write("<h2>You selected OK</h2>");else document.write("<h2>You selected Cancel</h2>"); }function promptUser() {name1=prompt("What is your name?”, “ “); document.write("<h2>welcome to this page " + name1 +

"</h2>"); }</SCRIPT></HEAD>

38

Using alert(), confirm(), and prompt()

<BODY>welcome to this page<br><FORM><INPUT TYPE=button VALUE="Click here to test

alert()” onClick="alertUser()"><BR><INPUT TYPE=button VALUE="Click here to test

confirm()" onClick="confirmUser()"><BR><INPUT TYPE=button VALUE="Click here to test

prompt()" onClick="promptUser()"></FORM></BODY></HTML>

39

Clicking on alert()

40

Clicking on confirm()

41

Clicking on prompt()

42

Simple Examples• Swap Images

– Steps• Preload images• On mouse over event swap the image• On mouse out event restore the image

43

Examples (continued)• Preload images

– if(document.images){ menu1img = new Image();menu1img.src = '/images/nav1_stations.gif';

menu1imgOn = new Image();menu1imgOn.src = '/images/nav1_stations_on.gif';

}• Swap Image function

– function swapImage(imageName, newImage){if(document.images[imageName]){

document.images[imageName].src = newImage.src;}

}• The Html

– <a href=“#” onmouseover=“swapImage(menu1,menu1imgOn)” onmouseout=“swapImage(menu1,menu1img)”><img src=“/images/nav1_sations.gif” id=“menu1” name=“menu1” alt=“” width=“130” height=“15” /></a>

44

Form Validation

Create function to run on form’s onSubmit event

<form name="myForm" id="myForm" action="#" method="get" onsubmit="return checkForm(this)">

<input type="text" name="firstName" id="firstName" value="" />

<input type="submit" />

</form>

45

Form Validation (continued)

• function checkForm(theForm){if(theForm["firstName"].value == ""){

alert("You must enter your first name");

theForm["firstName"].focus();return false;

}return true;

}

46

Other ways to access a form

– document.forms[0].elements[0]gets the first form and first element of the form

– document.forms[“formName”].elements[“elementName”]

47

Supporting IE and NS

• IE and NS do not support the same JavaScript language– they include similar/identical capabilities, but the way to invoke them is different

• We must write JavaScript that works across both browsers– if a client gets a JavaScript error it is annoying and there is nothing viewers can do

48

Multi-browser support• The JavaScript/** Determine what code to use*/

if( document.all ){this.init = IE_init;

}else if ( document.layers ) {this.init = NN_init;

}else if (document.getElementById) { this.init = std_init; }

49

Multi-browser support (IE)

• The JavaScript/** Init functions*/function IE_init(){

this.SwapImageOn = std_SwapImageOn;this.SwapImageOff = std_SwapImageOff;this.TurnSubOn = IE_TurnSubOn;this.TurnSubOff = IE_TurnSubOff;this.TurnOffLevel2 = std_TurnOffLevel2;this.TurnOnLevel2 = std_TurnOnLevel2;__windowLoaded();

}

50

Multi-browser support• The JavaScriptfunction IE_TurnSubOn(sectionname) { if(eval(sectionname+"SubDiv")){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; eval(sectionname+"SubDiv").style.visibility = "visible"; }}

function NN_TurnSubOn(sectionname) {if(eval(sectionname+"SubDiv")){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; document.layers[sectionname+"SubDiv"].visibility = "visible"; }}

function std_TurnSubOn(sectionname) { if(document.getElementById( sectionname+"SubDiv" ) != null){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; document.getElementById( sectionname+"SubDiv" ).style.visibility = "visible"; }}

51

Multi-browser support• Browser Detectionfunction getBrowserSpecs() {

var is = new Object();

var agt = navigator.userAgent.toLowerCase().toLowerCase();

// *** BROWSER VERSION ***

// Note: On IE5, these return 4, so use is.ie5up to detect IE5.

var reNumber = new RegExp( "[0-9\.]+" ); // assume the version is the first number in the USER AGENT

is.major = parseInt( reNumber.exec( agt )[0] );

is.minor = parseFloat( reNumber.exec( agt )[0] );

52

A Simple Example<HTML>

<HEAD>

<TITLE>Simple Javascript</TITLE>

</HEAD>

<BODY>

<H1>First Example of JavaScript</H1>

<SCRIPT LANGUAGE=”JavaScript”>



</SCRIPT>

</BODY>

</HTML>

53

Example 1: Browser Output

54

Another Example<HTML>

<HEAD><TITLE>Computing Factorials</TITLE></HEAD>

<BODY>

<H1>Another Example of JavaScript</H1>


document.write(“<H1>Factorial Table</H1>”);

for ( i = 1, fact = 1; i < 10; i++, fact = fact * i) {

document.write(i + “! = “ + fact);

document.write(“<BR>”);

}

</SCRIPT>

</BODY>

</HTML>

55

Another Example

56

JavaScript has Event Handlers<HTML>

<HEAD><TITLE>Handling Events Example</TITLE></HEAD>

<BODY>

<H1>Handling Events in JavaScript</H1>

<FORM>

<INPUT TYPE=”button” VALUE=”Click me”

onClick=alert(“You clicked me”) >

</FORM>

</BODY>

</HTML>

57

Example 3

58

Determining the Browser• navigator is a built-in object with properties

that describe the browser– defined in both IE and NS– navigator.appName is a string with the browser name

– navigator.appVersion is a string with the version number

– to determine the correct version you may need to convert from string to number

– parseFloat returns a number from a string, and ignores any part of the string after the number

– Number only converts a string that is a number to a number

59

Determining the Browser<HTML><HEAD><TITLE>Check Browser</TITLE>

</HEAD><BODY>

<SCRIPT language=JavaScript>

document.write(“<BR> This browser is “

+ navigator.appName);

document.write(“<BR> Version “

+ navigator.appVersion);

if (parseFloat(navigator.appVersion) >= 4)

{ document.write(“<BR> You have an up-to-date

browser”); }

</SCRIPT>

</BODY>

</HTML>

60

Browser Output

61

Avoiding Errors• Since IE and NS differ somewhat in JavaScript,

it is useful to first check if an object, property or method exists

• One can refer to any name in a conditional and if it is undefined the conditional returns false

newItem = something;//produces an error if

//something is undefined

if ( something ) { newItem = something; }

does not produce an error, but only changes newItem if something exists

62

Example: Checking Window Size• NS and IE use different object properties to

hold the window size– IE: document.body.clientwidth or clientheight

– NS: window.innerWidth or innerHeight• Suppose you want to vary the response depending

upon the size of the browser window– lets write a program that does this

63

Re-Direct the Browser<HTML><HEAD><TITLE>re-direct based upon window

size</TITLE></HEAD>

<BODY><SCRIPT language=JavaScript>

function windowHeight( ) {

if (document.body && //test for IE document.body.clientHeight)

{ return document.body.clientHeight;}

else if (window.innerHeight) //test for NS

{ return window.innerHeight; }

else {return 0;}; //both tests have failed

}

if (windowHeight() >= 500) {

document.location = “fancy.html”;}

else {document.location = “lessfancy.html”;};

</SCRIPT></BODY></HTML>

64

Points to Observe• If the check for IE and NS both fail then a

height of 0 is returned and the lessfancy file is displayed

• The conditional with the && clause is checked left-to-right in short-circuit mode

65

Example: A Dynamically Changing Banner

• Use JavaScript to have a region where the HTML is dynamic

• use the STYLE attribute to create an HTML block that is accessed by JavaScript

• use a periodically scheduled event

id = setInterval(JSstring, msec);• JSstring is JavaScript code and msec is

milliseconds • JSstring is called every time

66

Browser Output

67

HEAD of the banner Example<HTML><HEAD<TITLE>changing banner</TITLE>

<SCRIPT language=JavaScript>

var banners = new Array();

banners[0] = “banner0”;



var which = 0;

function update() {

display(“banner”, banners[which]);

which++;

if (which == banners.length) which = 0;

}

…display function

</SCRIPT><BODY>...

68

What Document HEAD does• Defines array banners of HTML to display• Defines counter, called which, that tells which

element is being displayed• Defines update which calls display() with ID

“banner” and the current element of banners, then increments which

69

Changing HTML in a Regionfunction display(id, str) {

if (document.all) {

document.all[id].innerHTML=str;}

else {

document[id].document.open();

document[id].document.write(str);

document[id].document.close();

}

70

BODY of Banner Example<HEAD><TITLE>Varying a Banner</TITLE>

<SCRIPT Language=JavaScript>

function update(){/*load new banner for eachcall*/}

</SCRIPT></HEAD>

<BODY onload= "if (setInterval) { setInterval('update()', 5000);}">

<p>An example of a changing text banner</P>

<P><SPAN ID="banner" STYLE="position:absolute;"><I>

<SCRIPT Language=Javascript>

if (setInterval)

{document.write('the banner is loading');}

else {document.write('Get a new browser');};

</SCRIPT></I></SPAN>

<BR><P>Here is the remainder of the document</P>

</BODY></HTML>

71

Points to Observe• Uses onload event handler to start a periodic

event with setInterval– runs the function update() every 5 seconds– update must be defined in the HEAD– does nothing if setInterval is not defined

• Uses an HTML SPAN tag to define the element that the update function will change– has an ID (similar to a name, but for all tags and is unique in the document)

– has a STYLE attribute specifying absolute position• needed in NS to modify the region

72

Something on STYLE• When an HTML tag specifies a style, the

position of the element can be controlled– very useful for layout– for NS to change the text, the position must be absolute

– this creates some awkwardness• the next element is relative, and it turns out this means it will overlap the SPAN region that is being changed

• “fix” this using some BR tags to skip ahead

73

Changing the SPAN region• NS and IE uses different ways to alter what is

in an HTML region– IE has innerHTML property which when set to a new value displays that HTML in the region

– document.all[id].innerHTML = str;– NS has a document object for each such region• open this document, write to it, and then close it

document[id].document.open();

document[id].document.write(str);

document[id].document.close();

74

About display()• Checks to see if document.all is defined

– if so, uses IE4 convention of changing innerHTML

– Otherwise assumes NS and uses NS conventions– note, this function will not be called for older browsers, because setInterval is not defined so the onload method does nothing

75

Accessing the SPAN Region

• A SPAN tag with an ID attribute creates a JavaScript variable that can be used to modify that region of the document– array of objects, one for each HTML tag, with an ID attribute

– accessed using the ID - string with a name– slightly different in NS and IE

• document.all[id] in IE• document[id] in NS• e.g. document.all[“banner”] or document[“banner”]

76

Highlighting Menus

• Menus whose elements are temporarily highlighted as the mouse moves over them

• One way: use two images for each menu item and change between them using the mouseover and mouseout events– this works in NS and IE version 4 or later

• Second way: use STYLE attributes to dynamically change color, but this is harder to get working on both browsers

77

Image Object

• Each image in an HTML document has an associated JavaScript object– the properties of the object include

• width and height in pixels• src, URL of the image file, changes image when set• complete, true after images finishes loading

– can refer to object by NAME attribute of HTML IMG tag, or via built-in array of images

• document.images.name• document.images[index] where index is either a

number or a string containing the name of the image

78

More on Image Object• An image object is created automatically

for each IMG tag in a document– if there is no name attribute, then one cannot

refer to it by name in JavaScript

• An image object can also be created in JavaScriptvar myImage = new Image();– this can be used to load images into a

document that are not visible in the displayed document

– pre-fetching to make images appear immediately

79

An Image Rollover• Image rollover is the effect used to change

between two images when the mouse moves over it– the images must be the same size– for the changes to be immediate, images must

be pre-fetched

• Generally used in highlighting menus, can be used wherever you want an image to change when the mouse moves over it

• try http://www.ruleweb.com/dhtml/index.html

80

Rollover Example<HTML><HEAD><TITLE>Image rollover</TITLE><SCRIPT language=javascript>function highlightdocs() {

if (document.images) {document.images[“docs”].src = docsOn.src;}}

function unhighlightdocs() {if (document.images) {

document.images[“docs”].src= docsOff.src;}}if (document.images) {

docsOn = new Image();docsOn.src = “images/docs_on.gif”;docsOff = new Image();docsOff.src = “images/docs_off.gif”;}

</SCRIPT></HEAD><BODY><P><A HREF=“documents.html” onMouseOver=“highlightdocs()”

onMouseOut=“unhighlightdocs()”><IMG SRC=“images/docs_off.gif: height=25 width=25 name=docs

border=0 alt=documents></A></P></BODY></HTML>

81

Observe in the BODY• The BODY creates an anchor with an

image inside– there are mouse event handlers– image tag sets height, width, no border, alt

text and name– the name is used to refer to the image in

javaScript, document.images[“docs”]

• the HEAD defines two functions– only runs if browser supports image object– changes image by setting its src property to

that of another, pre-fetched image called docs_on.gif

82

More on the HEAD• Highlighting requires two images

– the image is created, then set is src property which loads the image

– the names docsOn and docsOff are only used inside the functions, so it is OK to define them after• not used until the event handlers are

activated by the mouse moving over the image

83

Generalizing to Multiple Images• Suppose we want a general

highlight/unhighlight functions for any image in a document

• define two arrays onImages and offImages– store pre-fetched images in these

arrays, according to the same name as used for the image in the HTML

– in general arrays can be indexed by strings as well as numbers

84

Pre-fetching Required ImagesIf (document.images) {

var onImages = new Array;var offimages = new Array;onImages[“docs”] = new Image();onImages[“docs”].src = “images/docs_on.gif”;offImages[“docs”] = new Image();offImages[“docs”].src = “images/docs_off.gif”;onImages[“tech”] = new Image();onImages[“tech”].src = “images/tech_on.gif”;offImages[“tech”] = new Image();offImages[“tech”].src = “images/tech_off.gif”;

…}

85

General Highlighting Functions• Name each image in the HTML document

with the same name used in the pre-fetch arrays, onImages and offImages– e.g. the name “docs” was used for the

images, so use the same name in the HTML– then one can highlight by simply setting the

src property of an element in document.images to the src property of that element in onImages

<IMG SRC=“images/docs_off.gif” height=25 width=25 name=docs border=0 alt=documents>

86

Code for General Highlighting

function highlight(imgName) {if (document.images) {

document.images[imgName].src = onImages[imgName].src;}

}function unhighlight(imgName) {

if (document.images) {document.images[imgName].src =

offImages[imgName].src;}}

87

Summary• How to write JavaScript that works across

browsers– checking that the browser supports a given

feature such as document.images, before using it

– avoid annoying JavaScript errors that occur when viewing in one browser or the other

• the built-in image object in JavaScript– accessing via name or array of images– created automatically for each IMG tag in the

HTML– can also be created using new Image(); in

JavaScript

88

But Pre-fetching Repeats Code• Each image to be highlighted requires creating two

images and setting their src properties• Repeated code is an indication of where to use

subroutines• Alternate strategy: create a global array with the

names of all the images that will be used– must be the same as the names in IMG tags– this code requires images stored on the server to have file

names based on these names– specify a path and extensionpath + name + “_on.” + ext(note+appends)so path = “images/”, name=“docs”, ext=“gif” then file must

be in relative location “images/docs_on.gif”

• loop over the elements in this name array, creating and loading the images

89

Pre-Fetching Functionfunction prefetch(path, extension) {

var imageName, i;if (document.images) {

for ( i = 0; i < imageNames.length; i++) {imageName = imageNames[i];onImages[imageName] = new Image()onImages[imageName].src = path +

imageName + “_on.” + extension;offImages[imageName] = new Image();offImages[imageName].src = path +

imageName + “_off.” + extension;}

}}

90

Remainder of set-upvar imageNames = new Array(“docs”,

“tech”, “banner1”, “banner2”);if (document.images) {

var onImages = new Array();var offImages = new Array();prefetch(“images/”, “gif”);

}There are four highlighting images in array

91

Body of Four Images<BODY><P><A HREF=“documents.html”

onMouseOver=highlight(‘docs’) onMouseOut=unhighlight(‘docs’)><img src=images/docs_off.gif name=docs border=0 alt=documents width=25 height=25></A><BR><A HREF=“technology.html” onMouseOver=highlight(‘tech’) onMouseOut=unhighlight(‘tech’)><img src=images/tech_off.gif name=tech border=0 alt=technology width=25 height=25></A><BR>

<A HREF=“members.html” onMouseOver=highlight(‘banner1’) onMouseOut=unhighlight(‘banner1’)><img src=images/banner1_off.gif name=banner1 border=0 alt=banner1 width=25 height=25></A><BR>

. . . But there is still lots of repeated HTML

92

Reducing Repeated Code

• Use document.write to produce the required HTML

document.write(‘<A HREF=“’ + hrefs[I] + ‘” onmouseover=“highlight(\”” + imageName + “\’)”’ + ‘ onmouseout=“unhighlight(\”’ + imageName + “\’)”>

<IMG src=“’ + path + imageName + “_off.’ + extension + ‘” name=“’ + imageName + ‘”border=“0”’ + ‘ alt=“ ‘ + altText[I] + ‘”width=“’ + w + ‘” height=“’ + h + ‘”></A></BR>

93

Some Explanations• Considerdocument.write(‘<A HREF=“’ + hrefs[i] +

‘”’);which produces the HTML<A HREF=“documents.html”• Considerdocument.write(‘onmouseover=‘“highlight

(\’’ + imageName + ‘\’)”’which produces the HTMLonmouseover=“highlight(‘docs’)” where imageName has value “docs”

94

Function for Creating the MenuFunction createHighlightMenu(path, extension, w, h) {

var imageName, I;for (i=0; i <imagesNames.length; i++) {

imageName=imageNames[i];if (document.images) {

onImages[imageName] = new Image();onImages[imageName].src = path +

imageName + “_on.” + extension;

offImages[imageName] = new Image();offImages[imageName].src = path +

imageName + “_off.” + extension;

document.write(‘<A HREF=“’ + hrefs[i] + ‘” onmouseover=“highlight(\’’+imageName + ‘\’)”’ + ‘ onmouseout=“unhighlight(\’ ‘ + imageName + ‘\’)”><IMG src=“’+ path + imageName + ‘_off.’+ extension +’” name=“’+imageName + ‘” border=“0”’ + ‘ alt=“’ + altText[i] + ‘” width=“’ + w + ‘” height=“’ + h + ‘”></A><BR>’); } }

95

Document Body Using this function

<BODY><P><SCRIPT language=JavaScript>var imageNames = new Array(“docs”, “tech”, banner1”,

“banner2”);var hrefs= new Array(“document.html”, “tech.html”,

“banner1.html”, “banner2.html”);var altText new Array(“Docs”, “Techs”, “banner1”,

“banner2”);if (document.images) {

var onImages = new Array();var offImages = new Array();

}createHighlightMenu(“images/”, “gif”, 25, 25);</SCRIPT></P></BODY></HTML>

96

Example Document Object Property Values

Property Value

document.title ”My Home Page"

document.fgColor #000000

document.bgColor #ffffff

location.href "http://www.usc.edu/in.html"

history.length 8

97

window.open() Method Attribute Examples

•To create a new window that shows only the toolbar and status bar and is resizable

window.open(“newURL”, “New Window”, “toolbar,status,resizable”)

•the height and width defaults are the same as the browser•a new window is positioned in the upper left hand corner of the screen•a call to window.open() returns a value of the new window’s object; this should always be assigned to a variable, e.g.

newWindow = window.open(““,””)

if (newWindow != null) {

newWindow.document.write(“<HTML><HEAD><TITLE>Hi</TITLE></HEAD>”)}

98

Example<HTML><HEAD><TITLE>Putting Up a Help Window</TITLE>


function displayHelp() {

hWin = window.open(““, “Help”, “height=200,width=400”)

hWin.document.write(“<BODY>A Sample Help Window<BR>”)

hWin.document.write(“Please provide your first and last name<BR>”)

hWin.document.write(“Your Phone number should have no hyphens”)

hWin.document.write(“<FORM><INPUT TYPE=button value=’OK’ onClick=’window.close()’ >”)

hWin.document.write(“</FORM></BODY>”) }

</SCRIPT></HEAD><BODY>

<FORM NAME=”myform” method=”POST”><H2>Here is my Form</H2>

NAME: <INPUT TYPE=”text” name=”name”><BR>

Address: <INPUT TYPE=”text” name=”address”><BR>

Phone: <INPUT TYPE=”text” name=”phone”><BR>

<INPUT TYPE=”submit” VALUE=”Click Here”>

<INPUT TYPE=”button” VALUE=”Help” onClick=”displayHelp()”>

</FORM></BODY></HTML>

99

Help Window: Browser Output

100

Example Checking for Empty Fields<HTML><HEAD><TITLE>Elements Array</TITLE>

<SCRIPT LANGUAGE="javaScript">function doit() {

for (i = 0; i <= 3; i++) {if (document.forms[0].elements[i].value == "") {

alert("Please fill out all fields.")document.forms[0].elements[i].focus()break } } }

</SCRIPT></HEAD><BODY> <FORM METHOD="POST">Enter your first name: <INPUT TYPE="text" NAME="firstname"><P>Enter your last name: <INPUT TYPE="text” NAME="lastname"><P><INPUT TYPE="radio" NAME="gender">Male<INPUT TYPE="radio" NAME="gender">Female<P><INPUT TYPE="checkbox" NAME="retired">I am retired<br><INPUT TYPE="button" NAME="act" VALUE="Verify” onClick="doit()"></FORM></BODY></HTML>

101

Checking for Empty Fields: Browser Output

102

<HTML><HEAD><TITLE>Checking Elements in a Form</TITLE>


function checkFields() {

var size = document.myform.elements.length

var Flag = true

for (var i = 0; i < size; i++) {

if ((document.myform.element[i].value == null ||

document.myform.element[i].value == ““) &&

(typeof document.myform.element[i].value != ‘submit’ ||

typeof document.myform.element[i].value != ‘reset’)

{ Flag=true; alert(“The “ + document.myform.elements[i].name + “field is blank. Please enter a value.”); break }//endif

} //end of for

return Flag }

</SCRIPT></HEAD><BODY>

103

<FORM NAME=”myform” method=”POST” onSubmit=”return checkFields()”>

<H2>Here is my Form</H2>

Name: <INPUT TYPE=”text” name=”name”><BR>

Address: <INPUT TYPE=”text” name=”address”>< BR>

Phone: <INPUT TYPE=”text” name=”phone”>< BR>

<INPUT TYPE=”submit” VALUE=”Click Here”>< BR>

</FORM></BODY></HTML>

104

Browser Output

105

Multiple Selection Example

<HTML><HEAD><TITLE>Using Multiple Selection Lists</TITLE><SCRIPT LANGUAGE="JavaScript">function displaySelectionValues(objectName) { var ans = ""

for (var i = 0; i < objectName.length; i++) {if(objectName.options[i].selected) {

ans += objectName.options[i].text + "<BR>" } }myWin = window.open("", "Selections", "height=200,width=400")myWin.document.write("you picked these teams<BR>")myWin.document.write(ans) }

</SCRIPT></HEAD><BODY><FORM NAME="myform" method="POST"><SELECT NAME="teams" size=3 multiple><OPTION value="dodgers">Dodgers<OPTION value="yankees">Yankees<OPTION value="angels">Angels </SELECT><BR><INPUT TYPE="button" value="Show Selected Items" onClick="displaySelectionValues(this.form.teams)"></FORM></BODY></HTML>

106

Multiple Selection Lists: Browser Output

107

Working with the Date Object

getDate() returns date within month (1-31)

getDay() returns day within week (0-6)

getHours() returns hour within day (0-23)

getMinutes() returns minutes within hour (0-59)

getMonth() returns month within year (0-11)

getSeconds() getTime()

getYear() getTimeZoneOffSet()

setDate(arg) sets date within month (1-31)

setHours(arg) sets hour within day (0-23)

setMinutes(arg)sets minutes within hour (0-59)

setMonth(arg) sets month within year (0-11)

setSeconds() setTime() setYear()

Objects haveget and setfunctions

108

<HTML><HEAD><TITLE>Using the Date Object </TITLE></HEAD>

<BODY>

The Date object has methods: getMonth(), getDay(), getYear()<br>


update = new Date(document.lastModified)

theMonth = update.getMonth() + 1

theDay = update.getDay()

the Year = update.getYear()

document.writeln(“<I>Last updated:” + theMonth + “/” + theDay + “/” + theYear + “</I>”)

</SCRIPT>

</BODY></HTML>

109

Date Object: Browser Output

Documents

1 JavaScript csc667/867 Spring 2006 Ilmi Yoon. 2 Outline Basics of JavaScript, History Basics of the language variables, types, arrays, objects, and functions