JavaScript – Part IV Event Handlers, Images, Window object William Pegram George Mason University June 3, 2010

When is JavaScript Executed? As noted earlier, JavaScript between tags is executed when the page loads A notable exception to this rule is that the definition of a function is generally placed between 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 HandlerWhat it Handles onabortUser aborted loading the page onblurThe user left the object onchangeThe user changed the object onclickThe user clicked the object onerrorThe script encountered an error onfocusThe user made an object active onloadThe object finished loading onmouseoverThe cursor moved over an object onmouseoutThe cursor moved off the object onselectThe user selected the contents of the object

Event Handlers (cont.) Event/Event handlerWhat it handles onsubmitThe user submitted a form onunloadThe user left the page

Simple Image Rollover Add onmouseover and onmouseout event handlers to 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'">

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 if (window.screen.width>=1280) window.location="pageover1280.html"; else if (window.screen.width<1280) window.location="pageunder1280.html";

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 Explorer appVersion: 4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2;.NET CLR ;.NET CLR ;.NET CLR ; Media Center PC 6.0; InfoPath.2;.NET CLR )

Browser/version detection (cont.) My version of Firefox returns the following: appName: Netscape appVersion: 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("Micro soft")!= -1) window.location="ieversionofpage.html"; else if (window.navigator.appName.indexOf("Netsca pe")!=-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 tag -- 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