Home HTML Data Types DOM JavaScript JS Debugging

College Board Big Idea 1

Identifying and Correcting Errors (Unit 1.4)

Become familiar with types of errors and strategies for fixing them

  • Review CollegeBoard videos and take notes on blog
  • Complete assigned MCQ questions if applicable

Code Segments

Practice fixing the following code segments!

Segment 1: Alphabet List

Intended behavior: create a list of characters from the string contained in the variable alphabet

Code:

%%js

var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];

for (var i = 0; i < alphabet.length; i++) { 
	alphabetList.push(alphabet[i]);
}

console.log(alphabetList);

What I Changed

I changed the “for” to “i < alphabet.length” so it could repeat through the alphabet list. I also pushed characters from the alphabet to the array called alphabetList

Segment 2: Numbered Alphabet

Intended behavior: print the number of a given alphabet letter within the alphabet. For example:

"_" is letter number _ in the alphabet

Where the underscores (_) are replaced with the letter and the position of that letter within the alphabet (e.g. a=1, b=2, etc.)

Code:

%%js

let letterNumber = 5

if (letterNumber >= 1 && letterNumber <= alphabetList.length) { 
    console.log(alphabetList[letterNumber - 1] + " is letter number " + letterNumber + " in the alphabet"); 
} else {
    console.log("Invalid letter number");
}

What I Changed

I changed a condition where it can check if “letterNumber” is in range with the length of “alphabetList”. I also added a text where it says “invalid letter number” if the user enters something invalid. Lastly, I added an output message to display a correct letter and number.

Segment 3: Odd Numbers

Intended behavior: print a list of all the odd numbers below 10

Code:

%%js

let odds = []; 
let i = 1; 

while (i <= 10) {
  odds.push(i);
  i += 2;
}

console.log(odds);

What I Changed

I changed the variable evens to odds and made the first value of ‘i’ to 1, then added 2 so it can remain odd numbers.

BELOW NOT EDITED

The intended outcome is printing a number between 1 and 100 once, if it is a multiple of 2 or 5

  • What values are outputted incorrectly. Why?
  • Make changes to get the intended outcome.
%%js

var numbers = []
var newNumbers = []
var i = 0

while (i < 100) {
    numbers.push(i)
    i += 1
}
for (var i of numbers) {
    if (numbers[i] % 5 === 0)
        newNumbers.push(numbers[i])
    if (numbers[i] % 2 === 0)
        newNumbers.push(numbers[i])
}
console.log(newNumbers)

Challenge

This code segment is at a very early stage of implementation.

  • What are some ways to (user) error proof this code?
  • The code should be able to calculate the cost of the meal of the user

Hint:

  • write a “single” test describing an expectation of the program of the program
  • test - input burger, expect output of burger price
  • run the test, which should fail because the program lacks that feature
  • write “just enough” code, the simplest possible, to make the test pass

Then repeat this process until you get program working like you want it to work.

%%js

var menu =  {"burger": 3.99,
         "fries": 1.99,
         "drink": 0.99}
var total = 0


//shows the user the menu and prompts them to select an item
console.log("Menu")
for (var item in menu) {
    console.log(item + "  $" + menu[item].toFixed(2)) //why is toFixed used?
}
//ideally the code should support multiple items
var burger_count = prompt("How many Burgers")
total += menu.burger * burger_count
var fries_count = prompt("How many Fries")
total += menu.fries *fries_count
var drink_count = prompt("How many Drinks")
total += menu.drink * drink_count


//code should add the price of the menu items selected by the user
console.log(total)


<IPython.core.display.Javascript object>

To make your code more reliable at the early stages, be sure to check and clean user inputs, handle errors effectively, document your code well, and review it with others to catch problems. Keep your code organized into smaller parts, and use a consistent style for clarity and easier maintenance.

Hacks

  • Fix the errors in the first three segments in this notebook and say what you changed in the code cell under “What I Changed” (Challenge is optional)