Lecture 12: JavaScript Functions and Debugging
advertisement
Lecture # 12
JavaScript Functions and Debugging
Today
Questions: Quiz 1? Review for Quiz 2.
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.
Today
Questions: Quiz 1? Review for Quiz 2.
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.
Today
Questions: Quiz 1? Review for Quiz 2.
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.
JavaScript Functions
JavaScript - review
• Everything inside <script> is a program
• Document.write(“some text”)
– Writes out its parameter
• We can use variables and expressions
– Pay = payRate*hours
• We can write and reuse our own functions
Functions
• To create a function
functionName( parameterName, . . . )
{ any JavaScript Code }
• To call a function
– functionName(argument expression, . . . )
– Each argument is assigned to each parameter
– The body { } of the function is executed.
Simple Formatting function
<html>
<h1>Students</h1>
<ul>
<script>
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{ document.write("<li>"+name); }
</script>
</ul>
</html>
Modify the function
change all students
<html>
<h1>Students</h1>
<ul>
<script>
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
document.write(“<li><I>”);
document.write(name);
document.write(“</I>”);
}
</script>
</ul>
</html>
HTML Generated by JavaScript
<html>
<h1>Students</h1>
<ul>
<script>
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
document.write(“<li><I>”);
document.write(name);
document.write(“</I>”);
}
</script>
</ul>
</html>
<html>
<h1>Students</h1>
<ul>
<li><I>Phred</I>
<li><I>Joan</I>
<li><I>Jack</I>
</ul>
</html>
What is the Algorithm for Counting?
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 0
<html>
<h1>Students</h1>
<ul>
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 0
name = “Phred”
<html>
<h1>Students</h1>
<ul>
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 0
name = “Phred”
<html>
<h1>Students</h1>
<ul>
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 1
name = “Phred”
<html>
<h1>Students</h1>
<ul>
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 1
name = “Phred”
<html>
<h1>Students</h1>
<ul>
<li>Phred
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 1
name=“Joan”
<html>
<h1>Students</h1>
<ul>
<li>Phred
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 1
name=“Joan”
<html>
<h1>Students</h1>
<ul>
<li>Phred
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 2
name=“Joan”
<html>
<h1>Students</h1>
<ul>
<li>Phred
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 2
name=“Joan”
<html>
<h1>Students</h1>
<ul>
<li>Phred<li>Joan
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 2
name=“Jack”
<html>
<h1>Students</h1>
<ul>
<li>Phred<li>Joan
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 3
name=“Jack”
<html>
<h1>Students</h1>
<ul>
<li>Phred<li>Joan
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 3
name=“Jack”
<html>
<h1>Students</h1>
<ul>
<li>Phred<li>Joan<li>Jack
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 3
name=“Jack”
<html>
<h1>Students</h1>
<ul>
<li>Phred<li>Joan<li>Jack
</ul>Count =
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 3
name=“Jack”
<html>
<h1>Students</h1>
<ul>
<li>Phred<li>Joan<li>Jack
</ul>Count = 3
Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Count = 3
name=“Jack”
<html>
<h1>Students</h1>
<ul>
<li>Phred<li>Joan<li>Jack
</ul>Count = 3
<html>
Counting Demo
Modified Counting
<html>
<h1>Students</h1>
<ul>
<script>
Count = 0;
Student("Phred");
Student("Joan");
document.write(“<hr>”);
Student("Jack");
function Student(name)
{
Count=Count+1;
document.write("<li>"+name);
}
</script>
</ul>
Count =
<script>document.write(Count);</script>
</html>
Summing and Average
<html> <h1>Payroll</h1>
<script>
Count = 0;Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name+” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 0
<html> <h1>Payroll</h1>
Sum = 0
<script>
name = ?
Count = 0;Sum = 0;
wages = ?
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 0
<html> <h1>Payroll</h1>
Sum = 0
<script>
name = “Phred”
Count = 0;Sum = 0;
wages = 25
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 1
<html> <h1>Payroll</h1>
Sum = 0
<script>
name = “Phred”
Count = 0;Sum = 0;
wages = 25
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 1
<html> <h1>Payroll</h1>
Sum = 25
<script>
name = “Phred”
Count = 0;Sum = 0;
wages = 25
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 1
<html> <h1>Payroll</h1>
Sum = 25
<script>
name = “Phred”
Count = 0;Sum = 0;
wages = 25
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 1
<html> <h1>Payroll</h1>
Sum = 25
<script>
name = “Joan”
Count = 0;Sum = 0;
wages = 20
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 2
<html> <h1>Payroll</h1>
Sum = 25
<script>
name = “Joan”
Count = 0;Sum = 0;
wages = 20
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 2
<html> <h1>Payroll</h1>
Sum = 45
<script>
name = “Joan”
Count = 0;Sum = 0;
wages = 20
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 2
<html> <h1>Payroll</h1>
Sum = 45
<script>
name = “Joan”
Count = 0;Sum = 0;
wages = 20
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
<br>Joan - $20
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 2
<html> <h1>Payroll</h1>
Sum = 45
<script>
name = “Jack”
Count = 0;Sum = 0;
wages = 15
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
<br>Joan - $20
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 3
<html> <h1>Payroll</h1>
Sum = 45
<script>
name = “Jack”
Count = 0;Sum = 0;
wages = 15
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
<br>Joan - $20
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
Count = 3
<html> <h1>Payroll</h1>
Sum = 60
<script>
name = “Jack”
Count = 0;Sum = 0;
wages = 15
Student("Phred",25);
Student("Joan",20);
<html><h1>Payroll</h1>
Student("Jack",15);
<br>Phred - $25
document.write(“<p>Total Wages=$"+Sum);
<br>Joan - $20
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Summing and Average
<html> <h1>Payroll</h1>
<script>
Count = 0;Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Count = 3
Sum = 60
name = “Jack”
wages = 15
<html><h1>Payroll</h1>
<br>Phred - $25
<br>Joan - $20
<br>Jack - $15
Summing and Average
<html> <h1>Payroll</h1>
<script>
Count = 0;Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Count = 3
Sum = 60
name = “Jack”
wages = 15
<html><h1>Payroll</h1>
<br>Phred - $25
<br>Joan - $20
<br>Jack - $15
<p> Total Wages=$60
Summing and Average
<html> <h1>Payroll</h1>
<script>
Count = 0;Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Count = 3
Sum = 60
name = “Jack”
wages = 15
<html><h1>Payroll</h1>
<br>Phred - $25
<br>Joan - $20
<br>Jack - $15
<p> Total Wages=$60
<p>Average Wages=$20
Summing and Average
<html> <h1>Payroll</h1>
<script>
Count = 0;Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write(“<p>Total Wages=$"+Sum);
document.write("<p>Average Wages=$"+
(Sum/Count));
function Student(name,wages)
{
Count=Count+1;
Sum=Sum+wages;
document.write("<br>"+name +” - $”+wages);
}
</script>
</html>
Count = 3
Sum = 60
name = “Jack”
wages = 15
<html><h1>Payroll</h1>
<br>Phred - $25
<br>Joan - $20
<br>Jack - $15
<p> Total Wages=$60
<p>Average Wages=$20
</html>
Tables
<html> <h1>Payroll</h1>
<table cols=3>
<tr><td><b>Name</b></td><td><b>Wages</b></td></tr>
<script>
Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write("<tr>");
document.write("<td><b>Total</b></td>");
document.write("<td><b>$ "+Sum+"</b></td>");
document.write("</tr>");
function Student(name,wages)
{
Sum=Sum+wages;
document.write("<tr>");
document.write("<td>"+name+"</td>");
document.write("<td>$ "+wages+"</td>");
document.write("</tr>");
}
</script>
</table>
</html>
<html> <h1>Payroll</h1>
<table cols=3>
<tr><td><b>Name</b></td><td><b>Wages</b></td></tr>
Tables
<script>
Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write("<tr>");
document.write("<td><b>Total</b></td>");
document.write("<td><b>$ "+Sum+"</b></td>");
document.write("</tr>");
function Student(name,wages)
{
Sum=Sum+wages;
document.write("<tr>");
document.write("<td>"+name+"</td>");
document.write("<td>$ "+wages+"</td>");
document.write("</tr>");
}
</script>
</table>
</html>
<html> <h1>Payroll</h1>
<table cols=3>
<tr><td><b>Name</b></td><td><b>Wages</b></td></tr>
Tables
<script>
Sum = 0;
Student("Phred",25);
Student("Joan",20);
Student("Jack",15);
document.write("<tr>");
document.write("<td><b>Total</b></td>");
document.write("<td><b>$ "+Sum+"</b></td>");
document.write("</tr>");
function Student(name,wages)
{
Sum=Sum+wages;
document.write("<tr>");
document.write("<td>"+name+"</td>");
document.write("<td>$ "+wages+"</td>");
document.write("</tr>");
}
</script>
</table>
</html>
Today
1.
2.
3.
4.
5.
6.
Questions: Homework # 3? Lab # 4 – Budget Lab
Quiz 1? Review for Quiz 2.
Introduce: How can you make an On-line Grocery List?
Explain:
document.write, Text Concatenation, Debugging
JavaScript Functions, loops for calculations
Demo:
A Trip to the Grocery Store (10-15 min.)
Practice:
You solve a problem: Add the Tax (10 min.)
Evaluate: Share and evaluate your solution
Re-practice: Write a JavaScript function using a Selection List
to convert Celsius to Fahrenheit and vice versa
Review for Quiz 2.
Debugging
• What is a bug?
• In the old days computers would fail
because bugs would die on the circuits and
short them out
• A bug is a problem in a program that you
need to find
• You have a bug when your program doesn’t
work the way you want it to work
How do you find the last blue
wolf in Minnesota?
• Build a fence
• Listen for the
howl
• Build a fence
• Listen for the
howl
• Build a fence
• Listen for the
howl
• Build a fence
• Listen for the
howl
Debugging with a wolf fence
• Make your program do something that will
show where the problem is
• alert(“any string you want”);
Debugging
• Find a way to make your problem smaller
– Make a copy and cut features out of the copy
that don’t relate to your problem
– Put in Wolf fences to help you narrow down the
problem
Common Bugs
• Spelling and capitalization (JavaScript is CaSE
senSItivE)
• Bad punctuation (missing ; or “)
• Mismatched brackets, parenthesis, or quotes
• Forgetting () when creating or calling a function
• Functions should be in <script> tags inside the
header
• Calling a widget by its label, rather than its name
Today
Questions: Quiz 1? Review for Quiz 2.
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.
