17086e17b1c0d7e66cdfa90a1641baef.ppt
- Количество слайдов: 23
CSCI/CINF 4230 Java. Script, Part 3 Instructor: Charles Moen
Java. Script (Koch) Events are fired by actions that happen in a document, e. g. a user clicks a button or submits a form Java. Script programs are event-driven • The program waits for some user action – Clicking a link or a check box – Submitting a form – Loading a page • An action triggers an event – e. g. click, submit, or load events • Then a function is executed as a result of the event firing 2
Java. Script (Koch, Ding) Event Handlers Event handlers are the functions that are executed when a particular event fires We add GUI controls and event handlers to a Web page to make it interactive • The user interacts with a control – e. g. , by changing the value in a form field or clicking on a submit button • The event handler function is notified of this event • Then the function executes 3
Java. Script (Koch, Ding) Some Events Mouse events are available on all HTML elements Interface events are fired after certain mouse or key actions, e. g. , the submit event fires after a user clicks on a submit button Mouse events Interface events Keyboard events click blur keydown dblclick focus keypress mousedown change keyup mousemove load mouseout unload mouseover submit mouseup resize scroll 4
Java. Script (Koch, Ding) Some Commonly Used Events click • An element is clicked once mouseover • The mouse moves over an element change • The value of an element changes load • A page has been completely loaded in the browser submit • A user submits a form 5
Java. Script (Koch) Event Handler Registration Method 1: Inline event handlers Add an attribute to an HTML element • Works in all browsers • Deprecated because behaviour is not separated from structure •
Java. Script (Koch) Register Event Handlers in the Script Event-handling attributes are properties of elements in Java. Script Assign the event handler function to the element’s property for a particular event myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } The property for the submit event The event handler (do not use the parentheses)
Java. Script (Koch) The load Event Fires when the page is completely loaded in the browser Script initialization can be triggered by the load event myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } window. onload = init. Form; The event handler (do not use the parentheses) This assignment is executed immediately, because it is not in a function. Whenever the load event fires, the init. Form function will execute 9
Java. Script (Koch) this When used inside a function body, “this” refers to the object that the function belongs to If we assign a function as an object’s event handler, then it belongs to that object Since the “add. Sandwich” function belongs to the form, we can use “this” to refer to the form itself In the original function, we had to pass the form as an argument function add. Sandwich() { var my. Sandwich = ""; for (var i=0; i
Java. Script (Koch) Advanced Event Handler Registration The script-based event handler registration, as described so far, is considered the “traditional” approach because it is part of the Netscape 3 standard PROBLEM: • With the traditional approach, only one function can be registered for any one particular event Advanced event handler registration allows many event handlers for the same event on the same element • W 3 C event handler registration • Microsoft event handler registration 11
Java. Script (Koch) W 3 C Event Handler Registration Supported by Mozilla and Safari, but not by Microsoft IE myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } window. add. Event. Listener("load", init. Form, false); Use the “add. Event. Listener” method of the object that gets the event handler Three arguments: 1. The event name as a string 2. The event handler function 3. A boolean false = the event bubbles up (the usual choice) true = the event is captured 12
Java. Script (Koch) Microsoft Event Handler Registration Supported by Microsoft IE, but not Mozilla and Safari myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } window. attach. Event("onload", init. Form); Use the “attach. Event” method of the object that gets the event handler Two arguments: 1. The event name as a string, with “on” in front of the name 2. The event handler function 13
Java. Script (Koch) Cross Browser Support Browser detection (deprecated) • Check the value of navigator. user. Agent, and then branch to handle each browser differently • Early technique that is unreliable now, because the user. Agent value is unpredictable
Java. Script (Koch) Object Detection If your script uses an object or method, first check whether it exists in the browser; if it doesn’t exist, then return Works with any browser, any object, any method myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } Testing whether this method exists if (window. add. Event. Listener) { window. add. Event. Listener("load", init. Form, false); } else if (window. attach. Event) { window. attach. Event("onload", init. Form); } 15
DHTML
Java. Script (Koch, Wikipedia) DHTML Dynamic HTML A buzzword, not a standard • Adding visual effects to Web pages by using Java. Script and the DOM to change the CSS styles of HTML elements Some common uses today • Rollover buttons • Dropdown menus • Animations 17
Java. Script (Koch, Wikipedia, Yue) Background About DHTML First introduced in the Netscape and IE version 4 browsers • • The ability to add visual effects to the dynamically was exciting, because Web pages had always been static documents The problem: Most users still had version 3 browsers Also, Netscape and IE tried to be as incompatible as possible • • Browser sniffing was recommended for dealing with incompatibilities Hooks to elements were treated differently In Netscape
function move. Right(){ var" src="https://present5.com/presentation/17086e17b1c0d7e66cdfa90a1641baef/image-19.jpg" alt="Java. Script (Koch, Wikipedia, Yue) A Simple Example 19
Java. Script (W 3 schools) More Examples http: //www. w 3 schools. com/dhtml_examples. asp 20
Java. Script (Keith, Yue) inner. HTML A property of an element • All of the HTML in the element Not part of the DOM Introduced by Microsoft in IE 4, and supported by most browsers today 21
Java. Script (Keith, Yue) Using inner. HTML
References Ding, Wei, “Java. Script” UHCL lecture slides, 2008. Keith, Jeremy. DOM Scripting: Web Design with Java. Script and the Document Object Model. friends of ED, 2005. Koch, Peter-Paul, PPK on Java. Script. New Riders, 2007. Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress, 2007. Shannon, Ross. “DHTML Explained”. (2008) [Online]. Available: http: //www. yourhtmlsource. com/javascript/dhtmlexplained. html W 3 Schools Online Web Tutorials. “Java. Script Tutorial”. [Online]. Available: http: //www. w 3 schools. com/js/default. asp Wikipedia. “DHTML”. [Online]. Available: http: //en. wikipedia. org/wiki/Dynamic_HTML Yue, Kwok-Bun, “An Introduction to Java. Script” UHCL lecture notes, 2000. Yue, Kwok-Bun, “An Introduction to Dynamic HTML” UHCL lecture notes, 2000. 23


