Home HTML Data Types DOM JavaScript JS Debugging Review Ticket

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 < 10; i++) {
	alphabetList.push(i);
}

console.log(alphabetList);

<IPython.core.display.Javascript object>

What I Changed

I changed…

I changed the value on the brackets in the .push() code. Instead of it being i, which would ultimately output numbers, I input alphabet.charAT(i) which would instead get the character associated with any intiger, i, in the array.

%%js

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

for (var i = 0; i < 28; i++) {
//Instead of the output being i which would be the number increasing at incaments of one, I changed it so that the code would output the letters assigned to those numbr values. 
	alphabetList.push(alphabet.charAt(i));
}

console.log(alphabetList);

<IPython.core.display.Javascript object>

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

// Copy your previous code to built alphabetList here

let letterNumber = 5

for (var i = 0; i < alphabetList; i++) {
	if (i === letterNumber) {
		console.log(letterNumber + " is letter number 1 in the alphabet")
	}
}

// Should output:
// "e" is letter number 5 in the alphabet

<IPython.core.display.Javascript object>

What I Changed

I changed…

I changed/added the alphabet list code from the previous cell. I then changed the code in the for statement. Originally, it was comparing i, an intiger, to string (alphabet list). If you add .length, it changes it to the length of the alphabet list which is 27 letters long. Then I subtracted 1 from letter number since arrays assign numbers to letters starting from 0 (this way we would actually get the 4th letter in the array but when you count starting from one it would be the 5th letter in the array). In order to print the actual letter from the array, I had to change the consol.log() statement as well. Instead of just printing the letter number which would just print out 5, we have to print out the 5th letter in the array, alphabetList. So we set alphabetList[] parameters to letterNumber - 1 in order to get the letter we want.

%%js

// Copy your previous code to built alphabetList here
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];

for (var i = 0; i < 26; i++) {
//Instead of the output being i which would be the number increasing at incaments of one, I changed it so that the code would output the letters assigned to those numbr values. 
	alphabetList.push(alphabet.charAt(i));
}

let letterNumber = 5

//Change to alphabetlist.length in order to compare intigers to intigers with this comparison statement. 
for (var i = 0; i < alphabetList.length; i++) {
	//Subtract one because arrays assign numbers starting from 0.
	if (i === letterNumber - 1) {
		console.log(alphabetList[i] + " is letter number " + letterNumber + " in the alphabet")
	}
}

// Should output:
// "e" is letter number 5 in the alphabet

<IPython.core.display.Javascript object>

Segment 3: Odd Numbers

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

Code:

%%js

let even = [];
let i = 0;

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

console.log(even);

<IPython.core.display.Javascript object>

What I Changed

I changed…

I changed the name of the array from even to odd since we will be printing odd numbers, as well as every other time the even array was mentioned. Then, I sat intiger, i, equal to 1 instead of 0 since it should start from the first odd number in the domain of [0,10].

%%js

let odds = [];
// Change even to odd since we are trying to output the odd numbers.
let i = 1;
// Changed i = 0 to i = 1 so that we can start from the first odd number

while (i <= 10) {
  odds.push(i);
  // Changed even.push to odd.push because even is not a defined array anymore.
  i += 2;
  // Keep i += 2 in the loop because odd + 2 is the next odd number.
}

console.log(odds);

<IPython.core.display.Javascript object>

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.

The output printed two 0s and will continue to print duplicates of numbers that have a multiple of both 2 and 5. 100 is also missing.

%%js

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

while (i <= 100) {
    numbers.push(i);
    i += 1;
}
// Changed to if else statement so that it would not output two values twice. If the value is acceptable in the first statement, it will not continue and print it out again.
for (var i of numbers) {
    if (numbers[i] % 5 === 0)
        newNumbers.push(numbers[i]);
    else if (numbers[i] % 2 === 0)
        newNumbers.push(numbers[i]);
}
console.log(newNumbers);


<IPython.core.display.Javascript object>

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 mutliple items

var askList = ["burger", "fries", "drink"];
for (var item2 of askList) {
    total += menu[item2];
}
//code should add the price of the menu items selected by the user 
console.log(total.toFixed(2))

<IPython.core.display.Javascript object>

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)