Home | HTML | Data Types | DOM | JavaScript | JS Debugging |
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 < 26; i++) {
alphabetList.push(alphabet[i]);
}
console.log(alphabetList);
<IPython.core.display.Javascript object>
What I Changed
I changed the “i < 10” to “i < 26”> since the alphabet has 26 letters. Then, I changed the parentheses aroudn the i to square brackets so it would be an array, and I added an alphabet right before so it would acess the alphabet string.
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
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];
for (var i = 0; i < 26; i++) {
alphabetList.push(alphabet[i]);
}
console.log(alphabetList);
let letterNumber = 5
for (var i = 0; i < alphabetList.length; i++) {
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>
What I Changed
I added the previous code into the section provided, then added “.length” to ensure that when the number of iterations is still less than the length of alphabetList, it will continue to loop over the elements in the array. Adding alphabetList[i] makes sure that the code prints “e” instead of “5”.
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 <= 100) {
if (i % 2 === 1)
odds.push([i])
i += 2;
}
console.log(odds);
<IPython.core.display.Javascript object>
What I Changed
I changed the “evens” to odds so it would make more sense to me, then changed i=0 to i=1, so the list starts on an odd number, then prints every other number after that, which should be odd.
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? Many values were printed twice, and a few of the numbers weren’t divisible by 2 or 5.
- Make changes to get the intended outcome. I changed i = 0 to i = 1, so it didn’t consider 0, then took out the numbers[], so it wouldn’t acess an array called “i”, but instead acess the element i itself, not the index.
%%js
var numbers = []
var newNumbers = []
var i = 1
while (i < 100) {
numbers.push(i)
i += 1
}
for (var i of numbers) {
if (i % 5 === 0)
newNumbers.push(numbers[i])
if (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")
var item = prompt("Please input the items from the menu you would like.")
for(var item.lowerCase in menu) (
var price = menu[item];
total += price;
console.log("your total is:" + total.toFixed(2))
//makes the decimal up to 2 digits b/c its money
)
for (var item in menu) {
console.log(item + " $" + menu[item].toFixed(2)) //why is toFixed used?
}
//ideally the code should support mutliple items
var item = "burger"
//code should add the price of the menu items selected by the user
console.log(total)
<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)