UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION

OBJECTIVES  CO3 Create a website that is optimized for viewing on a mobile device.  CO5 Describe the use of scripting when creating a website.  CO6 Create a dynamic website using JavaScript. 2

LEARNING OUTCOMES LO30 Describe how JavaScript event handlers work. LO31 Create JavaScript event handlers. LO32 Explain various methods of determining which features a browser supports. LO33 Explain what is meant by "graceful degradation." LO34Identify the steps you should take to test a mobile website. 3

DOM EVENTS DOM events are things that happen to the browser. For instance:  When a user clicks the mouse  When a web page has loaded  When an image has been loaded  When the mouse moves over an element  When an input field is changed  When an HTML form is submitted  When a user strokes a key 4

DOM EVENTS  Mouse Events: onclick, ondblclick, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup  Keyboard Events: onkeydown, onkeypress, onkeyup  Object Events: onabort, onerror, onload, onresize, onscroll, onunload  Form Events: onblur, onchange, onfocus, onreset, onselect, onsubmit 5

JAVASCRIPT EVENT HANDLERS  The script or function that you use to detect and respond to a DOM event is called an event handler.  The basic syntax of event handlers is: name_of_handler = "JavaScript code here" i.e. onclick = "alert('Hello World!');"  Create an event handler with no tag: <a href=" onmouseover="alert('You moved over the link.');"> This is a link. 6

JAVASCRIPT EVENT HANDLERS Create an event handler with tag: function DoIt() { alert("You moved over the link."); } This is a link. 7

 event.button  event.clientX  event.clientY  event.altkey  event.ctrlkey  event.shiftkey  event.keycode  event.srcElement 8 INTERNET EXPLORER EVENT PROPERTIES

 event.modifiers  event.pageX  event.pageY  event.which  event.button  event.target 9 NON- INTERNET EXPLORER EVENT PROPERTIES

USING MOUSE EVENTS JavaScript can detect mouse actions. Mouse event handlers:  Use onClick when the mouse button is clicked on images, buttons, links, etc.  Use onDblClick when the mouse button is double-clicked on images, buttons, etc., but not links  Use onMouseOver and onMouseOut to create rollover images  Use onMouseDown when the user presses the mouse button  Use onMouseUp when the user releases the mouse button 10

EXAMPLE OF MOUSE CLICK TEST 11

USING KEYBOARD EVENTS JavaScript can detect keyboard actions. Keyboard event handlers:  onKeyPress, onKeyDown, onKeyUp Display typed characters  Use event.keyCode property for IE i.e. key = String.fromCharCode(event.keyCode)  Use event.which property for non-IE i.e. key = String.fromCharCode(event.which) 12

EXAMPLE OF DISPLAYING TYPED CHARACTERS 13

USING THE ONLOAD AND ONUNLOAD EVENTS  onLoad event occurs when the current page or images finish loading from the server. i.e.  onUnload event occurs when another page is loaded or when the browser window is closed. i.e. 14

USING ONCLICK TO HIDE AND SHOW CONTENT 15

USING ONCLICK TO HIDE AND SHOW CONTENT 16

USING ONCLICK TO HIDE AND SHOW CONTENT 17

HTML5 SUPPORT AND CSS3 SUPPORT  HTML5 and CSS3 are a giant collection of specifications, standards, and tools that are wrapped up together under the title HTML5.  No web browser supports all the HTML5 standards.  Only IE 9 or later supports HTML5.  Opera Mobile has the most HTML5 support of mobile browsers.  Desktop browsers have more HTML5 support than mobile browsers. 18

19 HTML5 SUPPORT AND CSS3 SUPPORT

DETECTING HTML5 SUPPORT  It is a bad idea to detect mobile browsers or devices for HTML5 development,i.e.: Some browsers send user agent strings that imply they are a different browser. Privacy software can cloak the user agent string. Browser features can change while the user agent stays the same.  Instead, you should try detecting the HTML5 features you want to use. 20

DETECTING HTML5 SUPPORT The four basic ways to detect for HTML5 functions are to:  Check for the property on a global object.  Check for the property on an element you create.  Check that a method returns a correct value.  Check that an element retains a value. 21

DETECTING HTML5 SUPPORT  Check for the property on a global object.  Every HTML5 document is displayed in a global element – the navigator or the window.  For example, to test for offline web applications: if (window.applicationCache){ document.write("Yes, your browser can use offline web applications."); }else{ document.write("No, your browser cannot use offline web applications."); } 22

DETECTING HTML5 SUPPORT  Check for the property on an element you create.  When you create an element in the DOM, you are really just creating a dummy element in your browser's memory. 23

DETECTING HTML5 SUPPORT For example, to test if the browser support tag: if (document.createElement('canvas').getContext){ document.write("Yes, your browser can use the <canvas> tag."); } else{ document.write("No, your browser cannot use the <canvas> tag."); } 24

CHECK THAT A METHOD RETURNS A CORRECT VALUE. You can check that a method returns a correct value to validate elements like and that have codecs that are supported differently. The primary codecs are WebM and H.264. For example: return !!document.createElement('video').canPlayType; !video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 25

CHECK THAT AN ELEMENT RETAINS A VALUE  This is the most complicated way to check for HTML5 support.  This is an important testing method to learn because it is used to test for many different HTML5 features. 26

CHECK THAT AN ELEMENT RETAINS A VALUE For example to test whether the browser supports the range input element: function rangeCheck(){ var i = document.createElement("input"); i.setAttribute("type", "range"); if (i.type == "text"){ document.write("not"); } return; } 27

GRACEFUL DEGRADATION  Internet Explorer is the only exception to the rule about not detecting browsers.  To support HTML5 in IE 8, 7, and 6, add the HTMLshiv script to the section: 28

GRACEFUL DEGRADATION  Note the HTML5shiv script doesn't add functionality of the HTML5 tags to IE 6, 7, and 8, just allows the browser to recognize the HTML5 tags.  The idea of grace degradation is that a system should continue to function even if one if more of its components fails. 29

GRACEFUL DEGRADATION The secret to graceful degradation is making good choices. 1.Choose what technology your HTML5 application is going to support for the best features. 2.Decide which features are absolutely critical to the app's functionality. 3.Draw up a fallback plan for your core features. 4.Finally, come up with fallback options for your best features. 30

USING CSS3 MEDIA QUERIES TO DETECT MOBILE BROWSERS  all  aural  braille  embossed  handheld  print  projection  screen  tty  tv 31 CSS2 media-dependent style sheets to allow separate style sheets for different types of media i.e.

USING CSS3 MEDIA QUERIES TO DETECT MOBILE BROWSERS CSS3 extends the media attributes to allow you to check the user agent against various conditions, i.e.:  Width and height of both the screen and the device  Orientation of the screen  Aspect ratio of the screen and device  Colors, including number of colors, whether monochrome or color, and the color bit depth  Resolution  Scanning process of TV devices  Grid or bitmap devices 32