Event Driven Programming & User Defined Functions

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 • parametersare 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

Event Driven Programming & User Defined Functions