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:

%%html
<div id='display'></div>

<script>
let alphabet = '';

for (let i = 0; i < 26; i++) {
  alphabet += String.fromCharCode(97 + i);
}
var alphabetList = [];

for (var i = 0; i < alphabet.length; i++) {
	alphabetList.push(alphabet[i]);
}
document.getElementById('display').textContent = '[' + alphabetList.join(', ') + ']'
</script>

What I Changed

Non-Errors/Extra
  • The code displays the text in an HTML element instead of logging to console
  • Took on challenge provided in python errors and code no longer has typed out alphabet, uses fromCharCode function instead
Corrected Errors
  • For loop appends the alphabet[i], not the index itself
  • For loop repeats up till length of alphabet

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:

%%html

<div id="divDisplay"></div>

<script>

letterNumber = 5;

for (var i = 0; i < alphabetList.length; i++) {
  if ((i + 1) === letterNumber) {
    document.getElementById('divDisplay').textContent = alphabetList[i] + " is letter number " + letterNumber.toString() + " in the alphabet";
  }
}
</script>

What I Changed

Non-Errors/Extra
  • The code displays the text in an HTML element instead of logging to console
Corrected Errors
  • Loop displays letterNumber in content
  • if statement compares i + 1, not i to letterNumber to correct OBOE error
  • Displays letter using alphabetList[i], not number

Segment 3: Odd Numbers

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

Code:

%%html

<div id='evendisplay'></div>
<script>
evens = [];
j = 0;

while (j < 10) {
  evens.push(j + 1);
  j += 2;
}
document.getElementById('evendisplay').textContent = '[' + evens.join(', ') + ']'
</script>

What I Changed

Non-Errors/Extra
  • The code displays the text in an HTML element instead of logging to console
Corrected Errors
  • While loop checks if j is below 10, not if j is less than or equal to 10
  • While loop appends odd numbers by appending j + 1, not even 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.
%%html

<div id='multiplesdisplay'></div>
<script>
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])
    else if (numbers[i] % 2 === 0)
        newNumbers.push(numbers[i])
}
document.getElementById('multiplesdisplay').textContent = '[' + newNumbers.join(', ') + ']' 
</script>


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


console.log("Menu")
for (var item in menu) {
    console.log(item + "  $" + menu[item].toFixed(2))
}

var items = ["burger", "fries", "salad"]
var isAllOnMenu = true;

for (var i = 0; i < items.length; i++) {
    var itemName = items[i];
    if (menu.hasOwnProperty(itemName)) {
      total = total + menu[itemName];
    } else {
      isAllOnMenu = false;
      console.log(itemName + " is not on the menu");
    }
  }

console.log(total)

Hacks

Now is a good time to think about Testing of your teams final project…

  • What errors may arise in your project?
  • What are some test cases that can be used?
  • Make sure to document any bugs you encounter and how you solved the problem.
  • What are “single” tests that you will perform on your project? Or, your part of the project?
    • As Hack Design and Test plan action … Divide these “single” tests into Issues for Scrum Board prior to coding. FYI, related tests could be in same Issue by using markdown checkboxes to separate tests.