Scribd
Upload
5 views36 pages

07 Ch19

Uploaded by

unicornshawneya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views36 pages

07 Ch19

Uploaded by

unicornshawneya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Can we build this?

Styles
Variables
Creating the page…radio buttons

Finish coding the gas price radio buttons


Creating the page…radio buttons

Finish coding the Preferred customer radio buttons


Creating the page…radio buttons

Finish coding button and textbox


Programming Functions
(Chapter 19)

CS170
Computer Applications for Business
Functions
A JavaScript function is a block of code
designed to perform one particular task.

Making a pizza as 3 functions:

Make dough Make sauce Make Pizza


Functions
• A JavaScript function is a block of code
designed to perform one particular
task.
• Using functions manages the complexity
of programs.
• Functions allow for REUUSE of code
Creating a Function
Command Name Parameter(s)

function convertC2F ( tempInC ) {……}

function coinFlip( ){……}


function convertF2C(tempInF){…….}
function bmi(weightLbs, heightIn){……}
Creating a Function
Command Name Parameter(s)

function convertC2F ( tempInC ) {


var result = (9 / 5) * tempInC + 32;
return result;
}

function convertFtoC(degreesF){
var degreesC = (degreesF - 32)* 5/9;
return degreesC;
}
Parameters
• See CH19-FtoC-functions.html
• Parameter naming conventions follow the same
rules as variables

• They act just like normal variables.

• Unlike normal variables, parameters


– Begin life with a defined value (from the call)
– Can only be used inside the function –
LOCAL to the function
– Variables with the SAME name can be used
in DIFFERENT functions
Function Definition
• The function definition is the algorithm written
inside the { }’s.
• Follows JavaScript's general rules for
program statements
• The way to give the result back to the calling
statement:
return <expression>;

function convertC2F ( tempInC ) {


var result = (9 / 5) * tempInC + 32;
Definition
return result;
}
Making the Call
• To make the function actually happen, we
must call the function.
• We write the function name and give the
input values, also known as arguments in
parentheses.
• The arguments pass a copy of the data to
the parameters
convertC2F(38);

Argument
Arguments and Parameters
Pass no arguments:
coinFlip( );
function coinFlip( ){…}
Pass literal values:
add2Nums(3, 5);
function add2Nums(num1, num2){…}

From Argument to Parameter:


left-to-right, one-for-one
Parameters
• The parameters are the values that the function will
compute on, passed on from the calling
statement…What does the function need to know to
complete its task?
• The parameters are similar to other variables except:
• They are treated by “function” command, no “var”
needed
• If there is more than 1 parameter, separate by commas:
function totalPay (hoursWorked, rateOfPay) {
var pay = hoursWorked * rateOfPay;
return pay;
}
Arguments and Parameters
Pass an assigned value:
convertC2F(outsideTemp);
function convertC2F(tempInC){…}
Pass multiple assigned values:
bmiE(pounds, inches);
function bmiE(weightLbs, heightIn){…}

From Argument to Parameter:


left-to-right, one-for-one
Function That Does Not Return a Value
var pounds = 150, inches = 68;
bmiE(pounds, inches);
alert (“The program is completed);

function bmiE(weightLbs, heightIn){


var bmi;
bmi = (weightLbs / (heightIn * heightIn)) * 703);
alert (“Your BMI is: “ + bmi);
}
22.8
Function That Returns aValue
var bmi, pounds = 150, inches = 68;
bmi = bmiE(pounds, inches);
alert (“Your BMI is: “ + bmi);
alert (“The program is completed);

function bmiE(weightLbs, heightIn){


return (weightLbs / (heightIn * heightIn)) * 703);
}
Definition Versus Call
• A function’s declaration is different from its call
• Functions are declared only once
• Functions are typically called many times
• Functions can be placed anywhere in the
JavaScript. They are ignored until invoked (called).

• For built-in functions, which JavaScript provides, we


don’t even have to do that much,
• We just call (execute) it parseInt( )
alert( ) parseFloat( )
prompt( ) Math.floor( )
date( ) Math.round( )
toString( ) Math.random( )
toFixed(2)
Local vs GlobalVariables
• Local variable – created and used only in the
function
• Global variable – created in the main program
var x=1, y=2, z=3; var ans=0;
ans = calcBeta (x,y,z); What is the final value
of:

ans? 13
function calcBeta (a, b, c) {
var x, y; x? 1

x = 2*a; y= b+3*c; z = 7; y? 2
return x+y; 7
z?
}
Sample – CH19-Sample1.html

<style>
defines format of HTML elements
to make font in buttons bigger, use button
instead of input type = "button"
</style>
Create the function
<h1> Simple Example </h1>
<script> //PROGRAMMING PART HERE
function simple(){
var ans = 1 + 5 * 2;
textbox1.value = ans;
}
</script>
Call the function

<input type = "text" id = "textbox1" size = "5" > <br>


<button id = "calc"
onclick ="simple()" /> Calculate <br>
parameter
Using parameter variable in
calculation
Parameters

Store value entered


num is an argument by user in variable
in the call –passed num.
to the parameter of
the function. NOTE: Function
puts value in
textbox.
Pass & Return

Returning value to where


function was called.

NOTE: This is a much


better solution: The
function's ONE TASK is to
get an answer (not to
display the answer).
Pass & Return

Value calculated in
function in stored in
variable answer and
then put into
textbox.
Weekly Pay
function– Weekly Pay
Weekly Pay
Weekly Pay
Weekly Pay – the button

The code?
Coin Toss

flip = Math.random();
Math.round(flip));
CH 19 Topics
Chapter 19 – JavaScript Functions
• JavaScript rules for: functions, declarations,
return values, function calls, scope of
reference, and local/global variable reference,
Forms and Functions
• You should be able to write and use simple
functions
• Built-in functions: Date(), Math.random(),
math.floor(), toString()
• Reasons for using functions
• The Coin Flipping and Memory Bank example

You might also like