Embed Size (px)
Citation preview
IS2802Introduction to Multimedia Applications for BusinessLecture 3: JavaScript and Functions
Rob Gleasure
www.robgleasure.com
Lecture Outline
JavaScript Functions Where to place JavaScript JavaScript events JavaScript alerts JavaScript code snippets to try out
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.
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
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
Defining Functions
Function definition syntax:
function functionName(argument1, argument2, …)
{
//…Statements to be executed…
}
The body of the function must be enclosed in curly braces
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
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
}}
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…
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
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
The Location of JavaScript
Save the following code in a new file called lecture_two_demo.html
<html><head>
<script type="text/javascript">
function addArguments(a,b) {
return a + b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(addArguments(4,3));
</script>
</body>
</html>
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
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
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…
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
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
JavaScript Code Snippets to Try Out Copy this code into Notepad, saving as lecture_2_Ex.html
(continued onto next page)<html>
<head>
<script type="text/javascript">
<!--
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/"; }
}
//-->
</script>
</head>
JavaScript Code Snippets to Try Out
<body>
<input type="button" value="Click on this" onclick="annoy()"><br />
<a href="#" onmouseover="" onMouseout="harass()"> Hover over this</a>
<form>
<input type="button" onclick="confirmation()" value=“Visit BIS homepage">
</form>
</body>
</html>
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
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?
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.html
