Event Driven Programming & User Defined Functions Erdal Kose Cc3.12 Lecture 10
Objectives Event Driven Pages Event Handler User Defined Functions
Event Driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g., you enter credit card information in a form and submit it pages that respond to user actions such as mouse clicks or form entries are known as event-driven pages JavaScript code can be combined with HTML elements such as buttons, text fields, and text areas to produce event-driven pages
Event Handler an event handler is an HTML element that can be programmed to respond to a user’s actions the simplest event handler is a button a button can be associated with JavaScript code that will execute when the button is clicked general form of a button element: <input type="button" value="BUTTON_LABEL" onclick="JAVASCRIPT_CODE" /> the TYPE attribute of the INPUT element identifies the element to be a button the VALUE attribute specifies the text label that appears on the button the ONCLICK attribute specifies the action to take place any JavaScript statement(s) can be assigned to the ONCLICK attribute this can be (and frequently is) a call to a JavaScript function
Cont.. onclick event-handler is normally assigned in the button’s HTML <input> tag with the HTML onclick attribute <input type=“button” value= Do Click” onclick=“alert(‘ this is cc3.12’)” /> onMouseOver Whenever the user moves mouse over the event-handler a onMouseOver event accurs.
onMouseOut: Whenever the user moves mouse off the event-handler a onMouseOut event accurs Example: <html> <head><title>event-handler</title> </head> <body> <p> <img src=“image.jpg” name=“test_image” onMouseOver=“test_image.src=‘image_1.gif'; return true" onMouseOut =“test_imag.src=‘image_3.gif'; return true" /> </p> </body> </html>
More Example <html> <head> </head> <body> <p> <a href="#" onMouseOver="document.bgColor='red'; return true" onMouseOut ="document.bgColor='white'; return true" > Watch me! </a> </p> </body> </html>
User Defined Functions A function is a piece of JavaScript code that can be executed once or many times by the JavaScript application a function encapsulates some computation & hides the details from the user Create a new function using the JavaScript function keyword User Defined Function are functions that designed by users Pre-defined Functions are functions that designed by JavaScript.
General Function Format to write general-purpose functions, we can extend definitions to include: 1) parameters, 2) local variables, and 3) return statements parameters are variables that correspond to the function’s inputs (if any) parameters appear in the parentheses, separated by commas local variables are temporary variables that are limited to that function only if require some temporary storage in performing calculations, then declare local variables using the keyword var, separated by commas a local variable exists only while the function executes, so no potential conflicts with other functions a return statement is a statement that specifies an output value consists of the keyword return followed by a variable or expression