Session 11

Dynamic HTML:Event Model and Filters

Matakuliah : M0114/Web Based Programming

Tahun : 2005

Versi : 5

Learning Outcomes

Pada akhir pertemuan ini, diharapkan mahasiswa

akan mampu :• menghasilkan web page dengan menerapkan

konsep Dynamic HTML: CSS, Event Model, Filter, Transition, dan Data Binding (C3)

11.1 Introduction11.2 Event ONCLICK and Event ONLOAD11.3 Error Handling with ONERROR11.4 Event ONMOUSEMOVE, ONMOUSEOVER and ONMOUSEOUT, ONFOCUS and ONBLUR11.5 More Form Processing with ONSUBMIT and ONRESET11.6 Event Bubbling and more DHTML Events11.7 Flip filters: flipv and fliph11.8 Transparency with the chroma Filter11.9 Creating Image masks11.10 Miscellaneous Image filters: invert, gray and xray11.11 Adding shadows to Text

Outline Materi

11.1 Introduction

• Event model– Scripts respond to user actions and change page

accordingly

• Moving mouse

• Scrolling screen

• Entering keystrokes

– Content more dynamic

– Interfaces more intuitive

• Many visual effects implemented in client-side browser– No server-side processing delays

– DHTML code usually small

• Filters– Cause changes to text and images

– Persistent

11.2 Event ONCLICK and Event ONLOAD

• ONCLICK event – Fires when user clicks mouse– ID attribute

• Specifies unique identifier for HTML element

• ONLOAD event– Fires when element finishes loading successfully

– Often used in BODY tag• Initiate scripts as soon as page loads

continue..

Sample Program (ONCLICK)

Sample Program (ONLOAD)

11.3 Error Handling with ONERROR

• ONERROR event– Error dialog box presented by browsers usually

confusing to user

– Use ONERROR event to restrain dialog box and handle errors elegantly

– One of few events that pass parameters• Three parameters:

– Type of error

– URL of file with error

– Line number of error

– Use to prevent incompatible browsers from complaining about scripts they cannot process

Sample Program

11.4 Event ONMOUSEMOVE, ONMOUSEOVER and ONMOUSEOUT, ONFOCUS and ONBLUR

• ONMOUSEMOVE event– Fires constantly whenever mouse in motion– event object

• Contains info about triggered event•srcElement

– Pointer to element object that triggered event

•offsetX and offsetY– Give location of mouse cursor relative to top-

left corner of object in which event triggered

Sample Program

continue..

11.4 Event ONMOUSEMOVE, ONMOUSEOVER and ONMOUSEOUT, ONFOCUS and ONBLUR

• Properties of the event objectProperty of event Description altkey This value is true if ALT key was pressed when event fired.

button Returns which mouse button was pressed by user (1: left- mouse button, 2: right-mouse button, 3: left and right buttons, 4: middle button, 5: left and middle buttons, 6: right and middle, 7: all three buttons).

cancelBubble Set to false to prevent this event from bubbling.

clientX / clientY The coordinates of the mouse cursor inside the client area (i.e., the active area where the Web page is displayed, excluding scrollbars, navigation buttons, etc.).

ctrlKey This value is true if CTRL key was pressed when event fired.

offsetX / offsetY The coordinates of the mouse cursor relative to the object that fired the event.

propertyName The name of the property that changed in this event. recordset A reference to a datafield’s recordset (see Chapter 23, “Data Binding”). returnValue Set to false to cancel the default browser action.

screenX / screenY The coordinates of the mouse cursor on the screen coordinate system.

shiftKey This value is true if Shift key was pressed when event fired.

srcElement A reference to the object that fired the event. type The name of the event that fired.

x / y The coordinates of the mouse cursor relative to this element’s parent element.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

11.4 Event ONMOUSEMOVE, ONMOUSEOVER and ONMOUSEOUT, ONFOCUS and ONBLUR

• ONMOUSEOVER event– Fires when mouse cursor moves over an

element

• ONMOUSEOUT event– Fires when mouse cursor leaves the element

• Combine events for rollover effect– Pre-load images

Sample Program

continue..

11.4 Event ONMOUSEMOVE, ONMOUSEOVER and ONMOUSEOUT, ONFOCUS and ONBLUR

• ONFOCUS event– Fires when an element gains focus

• User clicks on form field• User uses Tab key to highlight element

• ONBLUR event– Fires when an element loses focus

Sample Program

11.5 More Form Processing with ONSUBMIT and ONRESET

• ONSUBMIT event– Fires when a form is submitted

• ONRESET event– Fires when a form is reset

Sample Program

11.6 Event Bubbling and more DHTML Events

• Event bubbling– Events fired in child elements also “bubble” up to

their parent elements for handling

– Cancel bubbling using cancelBubble property of event object

– Forgetting to cancel event bubbling when necessary may cause unexpected results in your scripts

Sample Program

continue..

11.6 Event Bubbling and more DHTML Events

• Clipboard eventsEvent Description ONBEFORECUT Fires before a selection is cut to the clipboard. ONBEFORECOPY Fires before a selection is copied to the clipboard. ONBEFOREPASTE Fires before a selection is pasted from the clipboard. ONCOPY Fires when a selection is copied to the clipboard. ONCUT Fires when a selection is cut to the clipboard. ONABORT Fires if image transfer has been interrupted by user. ONPASTE Fires when a selection is pasted from the clipboard.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events

• Keyboard events

• Marquee Events

Event Description ONHELP <Fires when the user initiates help (i.e.,

by pressing the F1 key). ONKEYDOWN Fires when the user pushes down a key. ONKEYPRESS Fires when the user presses a key. ONKEYUP Fires when the user ends a keypress.

Event Description ONBOUNCE Fires when a scrolling MARQUEE bounces

back in the other direction. ONFINISH Fires when a MARQUEE finishes its scrolling.

ONSTART Fires when a MARQUEE begins a new loop.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events

• Data binding eventsEvent Description ONAFTERUPDATE Fires immediately after a databound object has been updated. ONBEFOREUPDATE Fires before a data source is updated. ONCELLCHANGE Fires when a data source has changed. ONDATAAVAILABLE Fires when new data from a data source become available. ONDATASETCHANGED Fires when content at a data source has changed. ONDATASETCOMPLETE Fires when transfer of data from the data source has completed. ONERRORUPDATE Fires if an error occurs while updating a data field. ONROWENTER Fires when a new row of data from the data source is available. ONROWEXIT Fires when a row of data from the data source has just finished. ONROWSDELETE Fires when a row of data from the data source is deleted. ONROWSINSERTED Fires when a row of data from the data source is inserted.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events

• Miscellaneous events– Continued from previous slide

Event Description ONRESET Fires when a form resets (i.e., the user clicks an

<INPUT TYPE = "reset">).

ONRESIZE Fires when the size of an object changes (i.e., the user resizes a window or frame).

ONSCROLL Fires when a window or frame is scrolled. ONSELECT Fires when a text selection begins (applies to INPUT

or TEXTAREA).

ONSELECTSTART Fires when the object is selected. ONSTOP Fires when the user stops loading the object. ONUNLOAD Fires when a page is about to unload.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events

• Mouse events

Event Description ONCONTEXTMENU Fires when the context menu is shown (right-click). ONDBLCLICK Fires when the mouse is double-clicked. ONDRAG Fires during a mouse drag. ONDRAGEND Fires when a mouse drag ends. ONDRAGENTER Fires when something is dragged onto an area. ONDRAGLEAVE Fires when something is dragged out of an area. ONDRAGOVER Fires when a drag is held over an area. ONDRAGSTART Fires when a mouse drag begins. ONDROP Fires when a mouse button is released over a valid

target during a drag. ONMOUSEDOWN Fires when a mouse button is pressed down. ONMOUSEUP Fires when a mouse button is released.

continue..© Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events

• Miscellaneous eventsEvent Description ONAFTERPRINT Fires immediately after the document prints. ONBEFOREEDITFOCUS Fires before an element gains focus for editing. ONBEFOREPRINT Fires before a document is printed. ONBEFOREUNLOAD Fires before a document is unloaded (i.e., the window

was closed or a link was clicked). ONCHANGE Fires when a new choice is made in a SELECT element,

or when a text input is changed and the element loses focus.

ONFILTERCHANGE Fires when a filter changes properties or finishes a transition (see Chapter 17, Filters and Transitions).

ONLOSECAPTURE Fires when the releaseCapture method is invoked.

ONPROPERTYCHANGE Fires when the property of an object is changed. ONREADYSTATECHANGE Fires when the readyState property of an element

changes.

© Copyright 2001 by Deitel & Associates. All Rights Reserved

11.7 Flip filters: flipv and fliph

• flipv filter– Mirrors text or images vertically

• fliph filter– Mirrors text or images horizontally

• Filters applied in the STYLE attribute– <TD STYLE = “filter: flipv fliph”>

Sample Program

11.8 Transparency with the Chroma Filter

• chroma filter– Apply transparency effects dynamically

• Each filter has a property enabled– If set to true, filter applied

– If set to false, filter not applied

• ONCHANGE event– Fires whenever the VALUE of a form field

changes

Sample Program

11.9 Creating Image masks

• mask filter– Create an image mask

• Background of element solid color• Foreground of element transparent to image or

color behind•color parameter specifies mask color

Sample Program

11.10 Miscellaneous Image filters: invert, gray and xray

• invert filter– Negative image effect

• Dark areas become light• Light areas become dark

– Good use of invert filter:• Signify something has just been clicked or selected

• gray filter– Grayscale image effect

• Color stripped from image• All that remains is brightness data

• xray filter– Xray effect

• Inversion of grayscale effect

Sample Program

11.11 Adding shadows to Text

• shadow filter– Creates shadowing effect– Property direction

• Direction of shadow• 0 (up), 45 (above-right), 90 (right), 135 (below-right), 180 (below), 225 (below-left), 270 (left) and 315 (above-left)

– Property color

• Increase padding if cut off by element borders

Sample Program

End of Session 11