Embed Size (px)
DESCRIPTION
CO1552 – Web Application Development. Further JavaScript: Part 1: The Document Object Model (Last Week) Part 2: Functions and Events. Overview. Part 1: The Document Object Model How the browser “structures” your pages, HTML and JavaScript Part 2: JavaScript Events and Event Handlers - PowerPoint PPT Presentation
Citation preview
CO1552 – Web Application Development
Further JavaScript:Part 1: The Document Object Model (Last Week) Part 2: Functions and Events
Overview
Part 1: The Document Object Model How the browser “structures” your pages,
HTML and JavaScript
Part 2: JavaScript Events and Event Handlers How the browser can react to user input
Simple JavaScript Statements
Simple statements perform single actions Using SCRIPT tags
document.write('hello');
Using HTML tags
<INPUT TYPE = "button" VALUE ="Press"onClick = "window.alert('Hello');">
JavaScript actions enclosed within a string
onMouseOver = "window.alert('Hello');" Difficult to write complex actions in this way
Functions
Functions are groups of JavaScript statements brought together to perform more complex tasks
Some pre-written standard functions
New functions can be created Functions have names by which
they are triggered or "called“ Exactly the same principle as
function in VB.NET
Anatomy of a Function
<HEAD>
<SCRIPT>
function calculate()
{
answer = (x*y)/2 * 100;
}
</SCRIPT>
</HEAD>
function name
brackets ( )
curly brackets { }
functiondefinition
Calling a Function
<BODY>
<FORM NAME="calcform">
<INPUT TYPE="button" VALUE="Calculate" onClick="calculate();">
</FORM>
</BODY> Function name + brackets
calling the function
Input Values (Arguments) Define function<SCRIPT>function calculate(x,y){answer = (x*y)/2 * 100;}
</SCRIPT> Call function <INPUT TYPE="button" VALUE="Calculate" onClick="calculate(5,10);">
Arguments defined in function
Arguments supplied when function is called
Output Values Instructions in the function<SCRIPT>
function calculate(x,y)
{
answer = (x*y)/2 * 100;
document.calcform.answerbox.value = answer;
}
</SCRIPT>
Change the value of the form element answerbox to the current value of answer
Output Values Create the output box<FORM NAME="calcform">
<INPUT TYPE="button" VALUE="Calculate" onClick="calculate(5,10);">
<INPUT TYPE="text" NAME="answerbox">
</FORM> New form element answerbox to display the value of answer
Hard-coded Arguments
Arguments can be "hard-coded" Fixed value Same result each time
<INPUT TYPE="button" VALUE="Calculate" onClick="calculate(5,10);">
Same result every time
User Supplied Arguments Different values - different (specific) result New form element
To receive input from user
<INPUT TYPE"text" NAME="inputbox">
Extra code in onClick To supply new argument to the function
onClick="calculate(5,document.calcform.inputbox.value);"
Built-in Functions Standard, pre-written functions in
JavaScript Easy to call and use Examples include:
Mathematicallog() sqrt()
TexttoUpperCase() length()
answer = Math.sqrt(25);
Functions as Variables Functions can return a value
This value can be used elsewhere The function name calls the function and
replaces it with the return value
answerbox.value=2*calculate(5,10)/1000
Events
Anything that happens on a web page User initiated events
Clicking a mouse, pressing a key Browser initiated events
Page finishes loading
Responded to by event handlers Specify behaviour according to events
When a happens do b Already seen and used event handlers in
this presentation
Event Handlers Trigger JavaScript code when an event occurs
onMouseOver - the mouse is moved over the object onMouseOut - the mouse is already over the object
and moves away from it onClick - the user clicks the mouse button on an
object onFocus - an element (such as a text box) receives focus, i.e. the user clicks into it to start typing
onLoad - the page finishes loading onUnLoad - the page is being replaced by another onError - something incorrect happens!
Using Event Handlers Event occurs and creates a pop-up
message
onClick="window.alert('You clicked me');"
Event occurs and calls a function
onClick="calculate(5,10);"
Event handler Code triggered
Event handler Function called
Summary Functions are used to group
statements/logical units of code Often put in the <SCRIPT></SCRIPT> section in
the <HEAD> of the page Functions are "called" by their unique name Arguments are values supplied to the function
Events can be user or browser initiated Event handlers trigger JavaScript statements Functions often triggered by events
