JavaScript – Part IVEvent Handlers, Images, Window object

William Pegram

George Mason University

June 3, 2010

When is JavaScript Executed?

•As noted earlier, JavaScript between <script></script> tags is executed when the page loads

•A notable exception to this rule is that the definition of a function is generally placed between <script></script> tags; however the function is executed only when it is called

•However, often JavaScript is executed in response to events that occur after the page loads, generally in response to user events

Event Handlers

Event /Event Handler What it Handles

onabort User aborted loading the page

onblur The user left the object

onchange The user changed the object

onclick The user clicked the object

onerror The script encountered an error

onfocus The user made an object active

onload The object finished loading

onmouseover The cursor moved over an object

onmouseout The cursor moved off the object

onselect The user selected the contents of the object

Event Handlers (cont.)

Event/Event handler What it handles

onsubmit The user submitted a form

onunload The user left the page

Simple Image Rollover

• Add onmouseover and onmouseout event handlers to <a> tag that change src property of img tag

• img tag is given a name so that JavaScript can refer to it

Simple Image Rollover Code

• <a href="" onmouseover="document.arrow.src = 'arrowover.gif'"

onmouseout="document.arrow.src=

'arrowup.gif'"><img src="arrowup.gif" name="arrow" /></a>

Window Object

• The screen property of the Window object provides information about the user's screen; in particular, you can detect the user's screen resolution and then display a page appropriate to this screen resolution

• The location property of the Window object can be used for automatic redirection to another page

Resolution Detection and Redirection Example

<script type="text/javascript">

if (window.screen.width>=1280)

window.location="pageover1280.html";

else if (window.screen.width<1280)

window.location="pageunder1280.html";

</script>

navigator property of the Window object

• The navigator property of the Window object refers to a Navigator object. This contains information about the user's browser

• appName property contains the name of the web browser

• appVersion contains the version information about the browser

Browser/version detection

• My version of IE 8 returns the following:appName: Microsoft Internet ExplorerappVersion: 4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET CLR 1.1.4322)

Browser/version detection (cont.)

• My version of Firefox 3.5.3 returns the following:

appName: NetscapeappVersion: 5.0 (Windows; en-US)

Extracting information from Navigator properties• As the above examples suggest, the information

provided by Navigator properties is often more detailed than needed, so often methods such as parseInt and indexOf are used to get the necessary information

• e.g. version = parseInt(navigator.appVersion)

would extract the integer at the beginning of these appVersion values

indexOf String method

• string1.indexOf(string2)

• This method returns the location of the first occurrence of string2 within string1, where the first position of a string is position 0

• if string2 is not contained within string1, the method returns -1

Using appName in browser detection

• If we had to test whether appName was equal to a certain string, like "Microsoft Internet Explorer", we would have to get the test exactly right and would have to modify the code if different versions of the browser, now or in the future, would return different values for appName

• Using indexOf allows a more flexible test – how? Answer shown on next page

indexOf example

if (window.navigator.appName.indexOf("Microsoft")!= -1) window.location="ieversionofpage.html";

else if (window.navigator.appName.indexOf("Netscape")!=-1) window.location="firefoxversionofpage.html";

Alternatives to browser and version detection• One could do browser and version detection

because a particular JavaScript feature will produce an error in a version of a browser

• So one could do a series of tests for browser and version to redirect to pages that wouldn't produce errors

• However, there are two other approaches to use to avoid such problems

Alternatives to browser and version detection (cont.)• Using the language attribute of the <script> tag --

<script language="JavaScript1.2"></script> means that the code between these script tags will not be executed by browsers that only run JavaScript 1.0 or 1.1

• One should set the language attribute at the minimum level necessary to avoid errors in that portion of code

Feature Testing as an Alternative

• A more direct, simpler way to deal with browser differences in support of JavaScript is to test whether the particular feature is supported. For example, to determine whether a particular feature is supported, we simply test for it in an if statement to decide whether to use it

Feature Testing examples

Before using the split() method, we write

if (s.split) /*Check to see whether it exists without invoking it */

a = s.split(":"); /*If it does exist, then safe to invoke it */

else a= mysplit(s,":"); // use some alternative

Feature Testing examples (cont.)

• if (document.images) {} //ok to use image rollovers

Thus we are directly testing for what we need to use rather than worrying about a list of browsers and version numbers which would need to be updated over time