Java Script and HTML Simple Event Handling Java

  • Slides: 24
Download presentation
Java. Script and HTML Simple Event Handling

Java. Script and HTML Simple Event Handling

Java. Script and DOM n Java. Script relies on a Document Object Model (DOM)

Java. Script and DOM n Java. Script relies on a Document Object Model (DOM) that describes the structure of the web page n n This is not the same as the XML DOM You can do a lot with a just a little understanding of the DOM n n n You use the DOM to access elements on the web page You can capture events without knowing the DOM at all You need the DOM to make any changes to the web page 2

Events n Some (but not all) elements on the web page respond to user

Events n Some (but not all) elements on the web page respond to user interactivity (keystrokes, mouse clicks) by creating events n Different kinds of elements produce different events n n n Browsers are not all alike in what events are produced We will concentrate on events from HTML form elements and commonly recognized events You can put handlers on HTML form elements n n If the event isn’t generated, the handler does nothing A handler should be very short n Most handlers call a function to do their work 3

A simple event handler n <form method="post" action=""> <input type="button" name="my. Button" value="Click me"

A simple event handler n <form method="post" action=""> <input type="button" name="my. Button" value="Click me" onclick="alert('You clicked the button!'); "> </form> n The button is enclosed in a form n method tells how to send the form data; action tells where to send it n The tag is input with attribute type="button" n The name can be used by other Java. Script code n The value is what appears on the button n onclick is the name of the event being handled n n The value of the onclick element is the Java. Script code to execute alert pops up an alert box with the given text 4

Capitalization n Java. Script is case sensitive HTML is not case sensitive onclick="alert('You clicked

Capitalization n Java. Script is case sensitive HTML is not case sensitive onclick="alert('You clicked the button!'); " n n n The red underlined parts are HTML The quoted string is Java. Script You will frequently see onclick capitalized as on. Click n n n The Java naming convention is easier to read This is fine in HTML, but an error if it occurs in Java. Script Also note: Since we have a quoted string inside another quoted string, we need both single and double quotes 5

Common events n Most HTML elements produce the following events: n n n n

Common events n Most HTML elements produce the following events: n n n n on. Click -- the form element is clicked on. Dbl. Click -- the form element is clicked twice in close succession on. Mouse. Down -- the mouse button is pressed while over the form element on. Mouse. Over -- the mouse is moved over the form element on. Mouse. Out -- the mouse is moved away from the form element on. Mouse. Up -- the mouse button is released while over the form element on. Mouse. Move -- the mouse is moved In Java. Script, these should be spelled in all lowercase 6

Example: Simple rollover n The following code will make the text Hello red when

Example: Simple rollover n The following code will make the text Hello red when the mouse moves over it, and blue when the mouse moves away <h 1 on. Mouse. Over="style. color='red'; " on. Mouse. Out="style. color='blue'; ">Hello </h 1> n Image rollovers are just as easy: <img src=". . /Images/duke. gif" width="55" height="68" on. Mouse. Over="src='. . /Images/duke_wave. gif'; " on. Mouse. Out="src='. . /Images/duke. gif'; "> 7

Events and event handlers I n The following tables are taken from: http: //developer.

Events and event handlers I n The following tables are taken from: http: //developer. netscape. com/docs/manuals/js/client/ jsguide/index. htm Event Handler Load Applies to Occurs when Document body User loads the page in a browser Unload Document body User exits the page on. Unload Error Images, window Error on loading an image or a window on. Error Abort Images on. Abort User aborts the loading of an image on. Load 8

Events and event handlers II Event Applies to Occurs when Handler Key. Down Documents,

Events and event handlers II Event Applies to Occurs when Handler Key. Down Documents, images, User depresses on. Key. Down links, text areas a key Key. Up Documents, images, User releases a on. Key. Up links, text areas key Key. Press Documents, images, User presses on. Key. Press links, text areas or holds down a key Change Text fields, text areas, select lists User changes on. Change the value of an element 9

Events and event handlers III Event Applies to Occurs when Handler Mouse. Down Documents,

Events and event handlers III Event Applies to Occurs when Handler Mouse. Down Documents, buttons, links User on. Mouse. Down depresses a mouse button Mouse. Up Documents, buttons, links Click Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links User releases on. Mouse. Up a mouse button User clicks a on. Click form element or link 10

Events and event handlers IV Event Applies to Occurs when Handler Mouse. Over Links

Events and event handlers IV Event Applies to Occurs when Handler Mouse. Over Links User moves cursor over a link on. Mouse. Over Mouse. Out Areas, links Select Text fields, text areas User moves on. Mouse. Out cursor out of an image map or link User selects on. Select form element’s input field 11

Events and event handlers V Event Applies to Occurs when Handler Move Windows User

Events and event handlers V Event Applies to Occurs when Handler Move Windows User or script moves a window on. Move Resize Windows User or script resizes a window on. Resize Drag. Drop Windows User drops an object onto the browser window on. Drag. Drop 12

Events and event handlers VI Event Applies to Windows and all form elements Occurs

Events and event handlers VI Event Applies to Windows and all form elements Occurs when User gives element input focus Handler Blur Windows and all form elements on. Blur Reset Forms User moves focus to some other element User clicks a Reset button Submit Forms Focus on. Reset User clicks a on. Submit button 13

Back to the DOM n n n You can attach event handlers to HTML

Back to the DOM n n n You can attach event handlers to HTML elements with very little knowledge of the DOM However, to change what is displayed on the page requires knowledge of how to refer to the various elements The basic DOM is a W 3 C standard and is consistent across various browsers n n More complex features are browser-dependent The highest level element (for the current page) is window, and everything else descends from that n n n Every Java. Script variable is a field of some object In the DOM, all variables are assumed to start with “window. ” All other elements can be reached by working down from there 14

The DOM hierarchy Source: http: //sislands. com/coin 70/week 1/dom. htm 15

The DOM hierarchy Source: http: //sislands. com/coin 70/week 1/dom. htm 15

Fields of window, I n window n n self n n If in a

Fields of window, I n window n n self n n If in a frame, the outermost enclosing window. frames[ ] n n If in a frame, the immediately enclosing window. top n n Same as window. parent n n The current window (not usually needed). An array of frames (if any) within the current window. Frames are themselves windows. length n The number of frames contained in this window. 16

Fields of window, II n document n n location n n The HTML document

Fields of window, II n document n n location n n The HTML document being displayed in this window. The URL of the document being displayed in this window. If you set this property to a new URL, that URL will be loaded into this window. Calling location. reload() will refresh the window. navigator n A reference to the Navigator (browser) object. Some properties of Navigator are: n n n app. Name -- the name of the browser, such as "Netscape" platform -- the computer running the browser, such as "Win 32" status n A read/write string displayed in the status area of the browser window. Can be changed with a simple assignment statement. 17

Methods of window, I n alert(string) n n confirm(string) n n Displays an alert

Methods of window, I n alert(string) n n confirm(string) n n Displays an alert dialog box containing the string and an OK button. Displays a confirmation box containing the string along with Cancel and OK buttons. Returns true if OK is pressed, false if Cancel is pressed. prompt(string) n Displays a confirmation box containing the string, a text field, and Cancel and OK buttons. Returns the string entered by the user if OK is pressed, null if Cancel is pressed. 18

Methods of window, II n open(URL) n n Opens a new window containing the

Methods of window, II n open(URL) n n Opens a new window containing the document specified by the URL. close() n Closes the given window (which should be a top-level window, not a frame). 19

Fields of document, I n n You must prefix these fields with document. anchors[

Fields of document, I n n You must prefix these fields with document. anchors[ ] n n An array of Anchor objects (objects representing <a name=. . . > tags) applets[ ] n An array of Applet objects n n n The properties are the public fields defined in the applet The methods are the public methods of the applet Cautions: n You must supply values of the correct types for the fields and method parameters n Changes and method calls are done in a separate Thread 20

Fields of document, II n forms[ ] n An array of Form elements n

Fields of document, II n forms[ ] n An array of Form elements n n images[ ] n An array of Image objects n n If the document contains only one form, it is forms[0] To change the image, assign a new URL to the src property links[ ] n An array of Link objects n A link has several properties, including href, which holds the complete URL 21

Fields of document, III n bg. Color n The background color of the document

Fields of document, III n bg. Color n The background color of the document n n title n n May be changed at any time A read-only string containing the title of the document URL n A read-only string containing the URL of the document 22

Fields of the form object n elements[ ] n An array of form elements

Fields of the form object n elements[ ] n An array of form elements 23

The End 24

The End 24