Lecture # 13

JavaScript Functions:

A Trip to the Grocery Store

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.

But first …

Calculating Payments for a Loan

Calculating Payments for a Loan

… if you don’t have a spreadsheet

The Payment “Power” Algorithm

How to code in javascript:

How to code in javascript:

Why this?

How to code in javascript:

Why this?

How to code it in javascript:

And this?

A Trip to the Grocery Store

Lets first make a table of groceries

Now add a button

What else do we need?

What Functions Do We Need?

• function CalcSubTotal()– For each item, add price * quantity to subtotal– Fill in the subtotal text box– Return the subtotal

• function CalcSalesTax(subtotal)– Multiply 6.25% * subtotal– Fill in the tax text box– Return the tax

What Functions Do We Need?

• function CalcTotal()– Call CalcSubTotal– Call CalcTax– Add subtotal and sales tax together, and fill in

the total text box

function CalcSubTotal()

function CalcSubTotal()

{

subtotal = (demoform.milk.value * 2.59) +

(demoform.bread.value * 1.09) +

(demoform.oranges.value * 0.89) +

(demoform.apples.value * 1.09) +

(demoform.tortillas.value * 0.99) +

(demoform.cheese.value * 2.49);

subtotal =

Math.round(subtotal*Math.pow(10,2))/Math.pow(10,2);

demoform.subtotal.value = subtotal;

return subtotal;

}

Creating the Event Handler<input type="button" value="Calculate Total" onClick="CalcTotal()">

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.

Group Exercise: Add the Tax

function CalcSalesTax(subtotal)

function CalcSalesTax(subtotal){ salestax = subtotal * 0.0625;

demoform.tax.value =

Math.round(salestax*Math.pow(10,2))/Math.pow(10,2);

return salestax;}

function CalcTotal()

function CalcTotal(){ subtotal = CalcSubTotal();

salestax = CalcSalesTax(subtotal);

total = subtotal + salestax;

demoform.total.value =

Math.round(total*Math.pow(10,2))/Math.pow(10,2);}

TodayQuestions: Homework # 3? Lab # 4? Lab 5?

1. Introduce: How can you make an On-line Grocery List?

2. Explain: document.write, Text Concatenation, Debugging

JavaScript Functions, loops for calculations

3. Demo: A Trip to the Grocery Store (10-15 min.)

4. Practice: You solve a problem: Add the Tax (10 min.)

5. Evaluate: Share and evaluate your solution

6. Re-practice: Write a JavaScript function using a Selection List

to convert Celsius to Fahrenheit and vice versa

Review for Quiz 2.