1 / 17

CO1552 – Web Application Development

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

zephr-cochran
Download Presentation

CO1552 – Web Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CO1552 – Web Application Development Further JavaScript:Part 1: The Document Object Model (Last Week) Part 2: Functions and Events

  2. 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

  3. 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

  4. 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

  5. Anatomy of a Function function name <HEAD> <SCRIPT> function calculate() { answer = (x*y)/2 * 100; } </SCRIPT> </HEAD> brackets ( ) functiondefinition curly brackets { }

  6. Calling a Function <BODY> <FORM NAME="calcform"> <INPUT TYPE="button" VALUE="Calculate" onClick="calculate();"> </FORM> </BODY> calling the function Function name + brackets

  7. Input Values (Arguments) Arguments defined in function • 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 supplied when function is called

  8. 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

  9. 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

  10. Same result every time Hard-coded Arguments • Arguments can be "hard-coded" • Fixed value • Same result each time <INPUT TYPE="button" VALUE="Calculate" onClick="calculate(5,10);">

  11. 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);"

  12. Built-in Functions • Standard, pre-written functions in JavaScript • Easy to call and use • Examples include: • Mathematicallog() sqrt() • TexttoUpperCase() length() answer = Math.sqrt(25);

  13. 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

  14. 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

  15. 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!

  16. Event handler Event handler Code triggered Function called 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);"

  17. 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

More Related