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 Introduction 11.2 Event ONCLICK and Event ONLOAD 11.3 Error Handling with ONERROR 11.4 Event ONMOUSEMOVE, ONMOUSEOVER and ONMOUSEOUT, ONFOCUS and ONBLUR 11.5 More Form Processing with ONSUBMIT and ONRESET 11.6 Event Bubbling and more DHTML Events 11.7 Flip filters: flipv and fliph 11.8 Transparency with the chroma Filter 11.9 Creating Image mask s Miscellaneous Image filters: invert, gray and xray 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 object 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 events continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events Keyboard events Marquee Events continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events Data binding events continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events Miscellaneous events –Continued from previous slide continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events Mouse events continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved

11.6 Event Bubbling and more DHTML Events Miscellaneous events © 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 – 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