1. IS2802 Introduction to Multimedia Applications for Business Lecture 3: JavaScript and Functions Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com

2. Lecture Outline JavaScript Functions Where to place JavaScript JavaScript events JavaScript alerts JavaScript code snippets to try out

3. JavaScript Functions A function is a collection of statements, grouped together under one name Upon completion of a function, a value is returned Each function will also accept certain arguments, i.e. different values upon which to operate their collection of statements A function remains dormant until the main program or another function ‘calls’ it.

4. JavaScript Statements There are a number of common types of JavaScript statements  Variable declarations  Function calls  Conditional Statements and loop Statements  Object Manipulation Statements  Comment Statements  Exception Handling Statements We’ll come back to these next week

5. Defining Functions JavaScript provides a range of predefined methods for use by developers, as well as allowing programmers to define their own functions Defining functions allows for  Greater reusability of code (saved time and effort)  Easier testing  Easier adaptation (code only has to be altered in one place)  Tidier/more logical code

6. Defining Functions Function definition syntax: function functionName(argument1, argument2, …) { //…Statements to be executed… } The body of the function must be enclosed in curly braces

7. Defining Functions Definition begins with the function keyword Following this is the name of the function  As with variable names, the function name must start with a letter or an underscore and may not contain spaces  The name is case-sensitive and must be unique but may contain any combination of alphanumeric characters Every function name includes a set of parentheses  These parentheses contain the arguments

8. Defining Functions A function requires a specific number of arguments when it is called (although this number may often be zero) Arguments are variables used in the function. These variables don’t need to be explicitly declared and are assigned a value when the function is called Example: function displayAlert(value) { If(value == true){ alert(“The value is true”); //function call }

9. Defining Functions The return statement Used to return control to the point at which the function was called Usually used if the function returns a result:  return true; May also be used if the function does not return a result:  return; Note: some people consider the second use of the return statement to be symptomatic of sloppy programming…

10. The Location of JavaScript There are three general areas that JavaScript can be placed for use in a webpage. 1. Inside the head tag 2. Within the body tag 3. In an external file The location of the JavaScript depends on when you wish the code to be executed, as well as other factors we will return to later

11. The Location of JavaScript If you want to have a script run on some event, e.g. when a user clicks somewhere  place that script in the head. If you want the script to run when the page loads, e.g. because you wish to load up different variants of the page depending upon the user’s browser  place the script within the body tag. If you want the script to run in several different pages  place the script within an external.js file

12. The Location of JavaScript Save the following code in a new file called lecture_two_demo.html function addArguments(a,b) { return a + b; } document.write(addArguments(4,3));

13. JavaScript Events Events allow JavaScript pages to be dynamic and interactive Example of events include:  A mouse click  The webpage loading  An image loading  Mouse moving over a hot spot on the webpage (usually referred to as hovering)  Submitting a HTML form  A keystroke  Timed events

14. JavaScript Events These events have predefined names, e.g. ‘onclick’, ‘onmouseover’, ‘onmouseout’  A complete list can be found at http://www.w3schools.com/jsref/dom_obj_event.asp To cause something to happen when an event occurs, we must: 1. Specify the event 2. Specify the HTML element that will be waiting for the event to occur 3. Specify what functions will be called when the event occurs

15. JavaScript Alerts An alerts is a pop-up dialogue box, usually placed ‘in front of’ the user’s browser window Alerts usually require some sort of action to be taken by the user before they can resume browsing, e.g. clicking ‘ok’, ‘cancel’, etc Alerts are annoying…

16. JavaScript Alerts So when do we use alerts?  When it’s very important that a user sees a message, e.g. when a security risk may be incurred by continuing to browse  When we wish to warn a user of content, e.g. if offensive humour is present  When some problem has occurred which means the website will not be able to function properly  When you need active confirmation for something, e.g. ‘can we email you with our information newsletter?’ (told you they were annoying) Alerts must be used sparingly, “Die pop-up die!!” is not an uncommon reaction to them among users

17. JavaScript Confirmation Pop-ups A confirm function provides the user with a choice about whether to agree to a certain action or not They are often used when an action is important, e.g. when a user is being transferred to a new sight or submitting details of payment

18. JavaScript Code Snippets to Try Out Copy this code into Notepad, saving as lecture_2_Ex.html (continued onto next page) <!-- function annoy() { alert("You clicked!") } function harass() { alert("You hovered!") } function confirmation() { var answer = confirm(“You’re leaving already?") if (answer){ alert(“Fine then go, what do I care!") window.location = "http://bis.ucc.ie/"; } } //-->

19. JavaScript Code Snippets to Try Out Hover over this

20. Exercise We’re going to make a button in lecture_2_Ex.html that tells us how many times it has been clicked  First, we need to create a variable called count with an initial value of 0  Make a new button on the page with the text “Count clicks” as a label  Define a new function in lecture_2_Ex.html l called alertCount() and set the button we just made to call this function when clicked  We want alertCount() to do two things Increment count (i.e. ad one to it) Create an alert with the value count

21. Exercise (cont.) Create a new button with the text “Reset count” and set it to call a function called resetCount() when clicked Define this resetCount() function, such that calling it sets count to zero Things to consider  Where do we declare our variable count?  What happens if we declare it inside the alertCount() function?  What happens when we refresh the page?

22. References and Further Reading http://www.w3schools.com/JS/default.asp http://www.tizag.com/javascriptT/index.php http://www.wdvl.com/Authoring/JavaScript/Tutorial/functions.htm l