UMass Lowell Dept. of Computer Science
COMP 4610 — GUI Programming I
Fall 2019 Semester
Prof. Jesse M. Heines filling in for Prof. Wenjin Zhou
Class Notes
JavaScript Debugging and Best Coding Practices
Tuesday, November 26, 2019
Handouts and References
- Estelle Weyl: 16 Common JavaScript Gotchas
- Ryan J. Peterson: Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make
- Catalin Rosu: A beginner's list of JavaScript gotchas
- Kyle Simpson: What the JavaScript?
- Mr. Miyagi (from The Karate Kid): “Best way to avoid punch: No be there”
Introductory Activity
Please go to https://pollev.com/heines to respond to the questions that I post there
- What do you most like to do?
That is, what is your favorite hobby / pastime / activity?
Or answer: “I am happiest when I am ...”
- Why do people go to work?
- What ABOUT PROGRAMMING really frustrates or annoys you the most?
What do your answers imply with respect to work and personal activities and time?
Class Notes
JavaScript is easy ... until it ain’t
Do you always understand your own code?
JavaScript “Gotchas”
Number.MAX_VALUE vs. Number.MIN_VALUE
- left-to-right associativity
- spaces
- switch statements
- introduction to coercion
- string coercion — strings to numbers
- more string to number coercions
- coercion of the Symbol primitive type
- finally
Using the Debugging Console
- using the
console.log() function
- typing directly in the console
- using auto-completion
- the
debugger statement
Avoiding Errors through Coding Style
“Best way to avoid punch: No be there”
Intentional obfuscation
Caching
- implications for code size
The role of documentation
- target documentation to a person who knows the language
- do NOT document syntax
- // this is a loop
- // increment x by 1
- document what things are used FOR
- // add all numbers from 1 to 10
- // proceed to next section
- include references for obscure code and algorithms
Basic Coding Practices
- write clear code that you intend others to maintain, modify, and update
- always use strict mode
"use strict" ; // see https://www.geeksforgeeks.org/strict-mode-javascript/amp
- control variable scoping by placing all variables within functions
- you will see a great way to do this using JSON when you get to that topic
- use
=== and !== to avoid type coercion
- use the
var foo = function( ... ) {
...
}
method of defining functions to ensure that they are defined before they are used
- always place
if and for clauses in curly brackets, even if there is only one statement in the clause
for ( var k = 1 ; k < 11 ; k++ ) {
sum += k ;
}
- always use semi-colons
Basic Code Formatting Rules (Style Guides)
https://google.github.io/styleguide/javascriptguide.xml
- always set your code editor to insert an appropriate number of spaces when the TAB key is pressed, not actual TAB characters
- indent consistently
- align opening and closing HTML tags
- exception: curly braces are not usually aligned vertically
- the opening curly brace usually appears at the end of a line
- the closing curly brace usually alligns with the beginning of the line containing the opening curly brace
- note that many code editors — such as Adobe Dreamweaver, which I used to create these lecture notes — do not follow these rules
- use vertical whitespace to separate logical sections
- name variables consistently
- consider Hungarian notation
nScorestrFirstNameobjAddress
- declare constants in all uppercase
Overall Code Development Process
Understanding “Stepwise Refinement”
- writing general functions first, often as stubs
- adding details in successive steps, testing each one thoroughly before moving on to the next step
Isolate code into separate files that get “included”
- allows and encourages reusability
- keeps code neat and easier to work with
Example: Successive versions of your Assignment No. 6
Thank YOU! 
