Lecture 06 ICE - Debugging

Note: Please keep the programs that you create today, in case you have a question about your grades for the ICEs at the end of the quarter. When you're working with a partner, each person should save their own, individual copy.

Part 1: Alert/console.log: figuring out what a program is doing & where the problem is

1. Download a this starter page: Tell_Me_What_This_Chooses_01.html
2. Start by just opening the page in a browser, reading the instructions on the page, trying it out (i.e., type in some numbers and push the button), etc.
3. Be ready to stand up and explain to the rest of the class what the program is supposed to do.
   Note: Even if this does the same thing as a prior example you still need to be able to accurately, clearly and concisely explain what this page should do.  The objective here is to practice the skill of figuring out what the page is intended to do AND the skill of explaining it well to others
4.  Next, look at the alerts and logging (if any) that is done when you click the button.
   Working with your partner(s) make sure that you can describe, overall, what's happening.
5. Next, look at the individual parts of the program.  Make sure that you can stand up and explain what each of the parts do.  You may need to look up (e.g., to Google/Bing) stuff like parseFloat.  (Don't worry about explaining everything at a super-technical level - just focus on providing an intuitive guess at what each part does).
6. Finally, fix any problems that you find, using the log statements to verify that you're doing the correct thing.
7. Be prepared to explain what the problems were, how you fixed them, and why you thought that was a good way to fix the problems.
   (This last part is especially important if there were multiple options for fixing the problem)

Part 2: Alert/console.log: figuring out what a program is doing & where the problem is

1. Download a this starter page: Tell_Me_What_This_Chooses_02.html
2. This exercise is pretty much the same as the prior exercise.

OPTIONAL Part 3:
Alert/console.log: figuring out what a program is doing & where the problem is

1. Download a this starter page: Tell_Me_What_This_Does_01.html
2. Start by just opening the page in a browser, reading the instructions on the page, trying it out (i.e., type in some numbers and push the button), etc.
3. Be ready to stand up and explain to the rest of the class what the program is supposed to do.
   Note: Even if this does the same thing as a prior example you still need to be able to accurately, clearly and concisely explain what this page should do.  The objective here is to practice the skill of figuring out what the page is intended to do AND the skill of explaining it well to others
4.  Next, look at the alerts and logging (if any) that is done when you click the button.
   Working with your partner(s) make sure that you can describe, overall, what's happening.
5. Next, look at the individual parts of the program.  Make sure that you can stand up and explain what each of the following do:
   1. What does the i-- do?
   2. How does the loop work?
6. Finally, fix any problems that you find, using the log statements to verify that you're doing the correct thing.
7. Be prepared to explain what the problems were, how you fixed them, and why you thought that was a good way to fix the problems.
   (This last part is especially important if there were multiple options for fixing the problem)

OPTIONAL Part 4:
 Alert/console.log: figuring out what a program is doing & where the problem is

1. Download a this starter page: Tell_Me_What_This_Does_02.html
2. This exercise is pretty much the same as the prior exercise, except for step #5, above.  The questions you should focus on for this exercise are:
3. Next, look at the individual parts of the program. 
   Add whatever console.log statements that you need to (or want to, or just feel like adding) so that you you can stand up and explain what each of the following do:
   1. How does the loop work?
   2. Why does the loop never seem to run?
   3. What does this do?
      i = i + 3;

Part 5: Adding Alert/console.log statements

1. Download a this starter page: Add_Debugging_01.html
2. Start by just opening the page in a browser, reading the instructions on the page, trying it out (i.e., type in some numbers and push the button), etc.
3. Be ready to stand up and explain to the rest of the class what the program is supposed to do.
   Note: Even if this does the same thing as a prior example you still need to be able to accurately, clearly and concisely explain what this page should do.  The objective here is to practice the skill of figuring out what the page is intended to do AND the skill of explaining it well to others
4.  You'll notice that there are no alerts/console.log statements anywhere in the program.
   Your job is to add whatever alert() and/or console.log() statements so that you can figure out what's going wrong with the program.
5. Fix any problems that you find, using the log statements to verify that you're doing the correct thing.
6. Be prepared to explain what the problems were and how you fixed them
   
   Even more important for this exercise you need to be able to explain what logging statements you put in (and where), what those statements told you, and how you used that information to find and fix the problem(s) in the program.

Part 4: Adding Alert/console.log statements

1. Download a this starter page: Add_Debugging_02.html
2. This exercise is otherwise the same as the prior exercise.

Part 5: Searching The Web For JavaScript Debugging Advice

For this exercise you should do two things: search the web (using Google/Bing) for advice on debugging JavaScript code and be prepared to present what you found to the rest of the class.  Please be aware that you may find a bunch of stuff that doesn't make a ton of sense - this is ok!  One of the goals for this exercise is to get you used to skimming over pages that contain useful information mixed in with information that you can't use.

When you do present your findings to the class you will be asked to list the search terms that you used (and why) so that others in the class can improve their web search skills as well.  After that be ready to explain what you found, why you think it's useful, and also what part(s) didn't make sense.