UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION.

UNIT 6

JAVASCRIP

T EVEN

T

HAN

DLERS &

WEB B

ROW

SERS

DETECT IO

N

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

LO34 Identify the steps you should take to test a mobile website.

3

DOM EVENTSDOM 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 <script> tag:<a href="http://www.google.com/"

onmouseover="alert('You moved over the link.');">

This is a link.</a>

6

JAVASCRIPT EVENT HANDLERS

Create an event handler with <script> tag:

<script>

function DoIt() {

alert("You moved over the link.");

}

</script>

< a href="http://www.google.com/" onmouseover="DoIt();"> This is a link.</a>

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 EVENTSJavaScript 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-IEi.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. <body onload="alert('Loading complete.');">

onUnload event occurs when another page is loaded or when the browser window is closed.i.e. <body onUnload="alert('Goodbye!');">

14

USING ONCLICK TO HIDE AND SHOW CONTENT

15


16


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 <canvas> tag:if (document.createElement('canvas').getContext){

document.write("Yes, your browser can use the

<code><canvas></code> tag.");

}

else{

document.write("No, your browser cannot use the

<code><canvas></code> tag.");

}

24

CHECK THAT A METHOD RETURNS A CORRECT VALUE.You can check that a method returns a correct value to validate elements like <video> and <audio> 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 VALUEFor 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 <head> 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 DEGRADATIONThe 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 BROWSERSCSS3 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

UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION.

Documents

Transcript of UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION.