Concepts of Algorithmic Thinking Resources for Debugging : Caught between a missing semicolon and su

1
Concepts of Algorithmic Thinking Resources for
Debugging Caught between a missing semi-colon
and success!

• D.A. Clements

2
Just a thought
3
Coding

• Best Practice

4
Coding

• Open your web browsers debugger window
• Write down your programming algorithm in English,
  expanding the detail as needed. (This is your
  pseudo code)
• Break your program down into smaller manageable
  parts (functions, statements, display, program
  logic, etc)

5
The dirty work

• Code View write a small section of your program,
  converting your pseudo code into JavaScript using
  the references for assistance.
• Code View Save
• Preview in Web Browser Open your .html file and
  debugger

6
rinse, wash, repeat.

• Web Browser Did you get what you were expecting
  with no errors?
• If not
• Code View Verify correct JavaScript syntax,
  verify algorithm is correct
• Code View Make ONE change to your code and hit
  save
• Web Browser Clear your debugger and reload your
  page
• Web Browser Did that remove the errors?
• If not repeat Step 2A
• Save a backup of your work to Vergil or H\ drive
• Figure out what logical piece must be written
  next (often times this plugs in to the previous
  section)
• Repeat 1 7 until finished

7
JavaScripting Process

• Write pseudo code
• Break down into modules
• Add details
• Translate into JavaScript syntax
• One module at a time
• Debug with Firefox Error Console

8
Debugging tools
9
Validate the underlying HTML

• Validate your code
• http//validator.w3.org
• Use validation link in Web Developers toolbar
• Set a firm foundation for JavaScript
• Sometimes makes all the difference!

10
JavaScript Tools

• Use Firefox browser for Win, Mac, Linux
• Tools Error Console for debugging help
• Use NotePad2 or NotePad for Windows
  (TextWrangler for Mac and Linux)
• File comparison
• ExamDiff for Windows
• TextWrangler for Mac includes this feature
• Download to Desktop and unzip

11
JavaScript Tools

• Firefox Web Developers Toolbar
• Download and installsee video
• Follow screen prompts
• Close and reopen Firefox
• Finding and Fixing errorssee video

12
Error Console to fix syntax errors

• Open file in Firefox Web browser.
• Firefox menu Tools Error console.
• Clear error console.
• Reload page by clicking on green arrow next to
  address bar.
• Find and fix any errors. Clear the error console.
• More errors? Repeat steps 4 and 5.
• Click on the submit button to run the onclick
  event.
• Find and fix any errors. Clear the error console.
• More errors? Repeat steps 7 and 8.

13
Still isnt working. What now?

• Youve fixed all the errors that show up in the
  Firefox Error Console
• Something still isnt turning out right.
• Its probably a logical error.
• You have a piece of code thats syntactically
  correct but its wrong.
• The computer is doing what you told it to do
• Disconnect between what you want to do and your
  code.
• How to fix it?

14
Fixing Logical Errors

• Some really flaky results can be caused by
• Missing at ends of statements
• Missing curly braceseven if theres only one
  statement
• Conditionals
• Functions
• Loops

15
Fixing Logical Errors

• Use alerts to track the value of variables
  throughout your code
• Insert wherever useful
• Line number tells you which alert was fired
• Variable name string tells you which variable
• alert("Line 67. ampm " ampm)

16
Fixing Logical Errors

• If you have a lot of curly braces,
• Make sure you have the right number and they are
  where you need them
• In Dreamweaver
• press Ctrl-F and Find All
• Bottom of results pane gives you a count.
• Repeat Find All for
• Compare the counts. They should be identical.
• NotePad2, NotePad, jEdit, and TextWrangler
• Match up by selecting one and the other will
  be shown
• Makes it easier to make sure they're where you
  want them!

17
Getting help

• The only dumb question is the one you dont ask.

18
Other sources of help

• Find a coding buddy
• Class Bulletin Board
• Post questions and answers
• Class Listserver
• Send questions by email to the entire class

19
Help

• When you email the Listserver
• Specify the problem you are having
• Specify what steps you have tried
• Specify what other resources you have contacted

20
When all else fails

• Walk the dog around the block
• Hug your spouse or partner
• Do the laundry
• Take some really slow deep breaths
• Stretch
• Jog
• Escape!

21
Come back refreshed

• Dont give up!
• The solution will pop out at you!
• If not

22
Animation

• JavaScript Debugging

23
End papers

• First there was the scroll.
• Then there was the book.
• Now we have the scrollbar.
• D.A. Clements