Foundations of IT (INFO1003)

Semester 2, 2012

Agenda:

!Last Week
-! Control Structure -! IF-statement -! IF-THEN-ELSE statement -! IF-ELSE IF statement

!In this lecture

Lecture 7.1 Javascripting 3 Functions

-! Functions -! Global and Local Variables

2/28

What is a Function?

Predefined Functions
! Suppose you needed to do some calculations like finding the square root, rounding numbers, calculating the sine value. ! We use the Math object and its functions

! In math you have functions:

f(x) = x + 2 If x = 2, then f(x) returns 4

! A function is a little program within your JavaScript program. ! Its purpose is to perform a single task or a series of tasks.
-! Printing a message -! Performing a calculation

<script type="text/javascript" > var num1 = prompt("Input a number with 2 decimal places: ");

var rounded = Math.round(num1);

document.writeln("<h1> The rounded number is: " + rounded + "</h1>"); </script>

! JavaScript has predefined functions ! We can also write our own functions
3/19

Math.round is a function that rounds num1 to the nearest whole number.

4/19

Defining Custom Functions ! The syntax for defining a function with no parameters is:
function keyword (required)

User Defined Functions

function displayMessage() {

Opening and closing brace. (required)

function myFunction() { statement 1; statement 2; statement n; }

}
Name of Function (Must be followed by parenthesis)

<script> <script>

Step 1. This statement calls the function displayMessage alert(Good Afternoon INFO1003 Student!); displayMessage();

! The syntax for calling a function with no parameters is to simply specify the function name: myFunction()
5/19

alert(This alert is being executed from a function); </script> </script>

6/19

Functions Organisations
! Syntax:

Functions with Parameters

! You can call a function containing parameters: ! With parameters, you can write more flexible functions. function myFunction( param1, param2, etc ) { some statements involving param1, param2 etc } myFunction( myValue1, myValue2, etc )

7/19

8/19

Example
Step 2. When this function is executed, the value of Joe is put into the variable parameter name.

Example
<script> function sum(a,b,c) { var sum = a + b + c; alert("The sum is: + sum); } </script> <script> x=10; y=20; z=30; sum(x, y, z); sum(10,20,30); </script>
Step 2. When this function is executed, the variables a, b, c are populated with the below values a = 10 b = 20 c = 30

<script> Joe function displayMessage(name) { Wakeup upJoe alert(Wake + name); Joe alert(Stop falling asleep!); } </script> <script> Joe displayMessage(Joe); </script>

+ is symbol for concatenate. This appends joe to the string Wake up to produce Wake up Joe

Step 1. We now call the sum function with three parameters: 10, 20, 30

Step 1. This statement calls the function displayMessage with a parameter value of Joe.

9/19

10/19

Functions that return values

Example (Q)
<script> function sum(a,b,c) { var result = a + b + c; return result; }
a=10 b=20 C=30

!In JavaScript, you can write functions to perform some task and return a value. !The value returned by a function is placed in some variable. !Syntax:
function myFunction() { specify the value or Use the return some statements; variable to return keyword return value; The value returned by myFunction is put } into someVariable <script> myFunction(); var someVariable = myFunction(); </script>
11/19

Step 3. total gets assigned a value </script> of 60.

Step 2. The sum function is executed. The value of result 60 is returned to the caller.

<script> var total = sum(10,20,30); 60 document.write(total); </script>

Step 1. We now call the sum function with three parameters: 10, 20, 30
12/19

Example Input/Output
<script> function sum(a,b,c) { var result = a + b + c; return result; } </script> <script> 10; var n1 = prompt(Enter 1st number:); 20; var n2 = prompt(Enter 2nd number:); 30; var n3 = prompt(Enter 3rd number:); var total = sum(10,20,30); var total = sum(n1,n2,n3); document.write(total); </script>
13/19

Remember from previous example

<script> var exam_result = prompt(What mark did you get (0-100)?") if (exam_result <50) { var grade = Fail! I am VERY disappointed!; } else if (exam_result >=50 && exam_result <65) { var grade = Just Pass! Not good enough!; } else if (exam_result >=65 && exam_result <75) { var grade = Credit! Further improvement needed!; } else { var grade = Distinction! You are a genius!; } document.write(grade); </script>
14/19

Exercise (Q):
Complete the following program writing a function called getGrade. getGrade will take 1 <script> function getGrade(mark) {
if (mark<0 || mark>100) { var grade=error; } else if (mark <50) { var grade = Fail!; } else if (mark>=50 && mark <65) { var grade = Pass!; } else if (mark >=65 && mark <75) { var grade = Credit!; } else { var grade=Distinction; } return grade;

parameter variable (mark) and return the grade. <html>

Discuss Global and Local Variables (1)

<head> <title>Global and Local Variables 1</title>

ExamResult Not between 0 & 100 0 50 50 65 65 75 >= 75

Grade error Fail Pass Credit Distinction

<script> function sum(a,b,c) { total=a+b+c; } </script> </head> <body> <script> var total=10; sum(10,20,30); alert(total); </script> </body> </html> What is the value of total?_________________
16/19

//First example

} </script> <script> var examResult = prompt(What mark did you get (0-100)?") var theGrade =getGrade(examResult); alert(theGrade); </script>
15/19

Discuss Global and Local Variables (2)

<html> <head> <title>Global and Local Variables 2</title> <script> function sum(a,b,c) { var total=a+b+c; } </script> </head> <body> <script> var total=10; sum(10,20,30); alert(total); </script> </body> </html> What is the value of total?_________________
17/19

Global and Local Variables

<html> <head> <title> title>Global and Local Variables 3</title> <script> function sum(a,b,c) {

// Second example } </script> </head> <body> <script>

var total=a+b+c; return total;

// Second example

var total=10; total=sum(10,20,30); alert(total); </script> </body> </html> What is the value of total?_________________
18/19

// Third example

External JavaScript Files

! ! ! ! Sharing javaScript functions You need to create a reference to this file You then call these functions from your html pages. e.g.
<html> <head> <script> function sum(a,b,c) { var total=a+b+c; return total; } <script> </head> <body> <script> total=10; total=sum(10,20,30); alert(total); </script> </body>
19/19