JavaScript – Part IV Event Handlers, Images, Window object

1. JavaScript – Part IVEvent Handlers, Images, Window object William Pegram George Mason University June 3, 2010

2. 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

3. Event Handlers

4. Event Handlers (cont.)

5. 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

6. 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>

7. 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

8. 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>

9. 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

10. 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)

11. Browser/version detection (cont.) • My version of Firefox 3.5.3 returns the following: appName: NetscapeappVersion: 5.0 (Windows; en-US)

12. 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

13. 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

14. 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

15. 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";

16. 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

17. 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

18. 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

19. 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

20. 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