Experience common JavaScript bugs
Review helpful debugging strategies
Learn how to write a JavaScript function
Learn how to update page content/style with JavaScript (if time)
By the end of this section, you should be able to:
JavaScript is notoriously difficult to debug due to its lack of error messages. We will go over some strategies in today's lab, but more debugging strategies can be found below. We strongly recommend you read through these, for easier debugging in future assignments.
There are several tools that are available to help debug JavaScript programs. For Firefox, the built-in Web Inspector is a popular in-browser debugging tool. For Chrome, Chrome Dev Tools are a popular choice (the Chrome Inspector tool is included with Chrome, and can be opened using Ctrl+I on Windows/Linux).
Validator tools are also useful for debugging JavaScript, and can detect common syntax errors that would otherwise be hard to find manually. You may find the W3C HTML Validator or JSLint helpful for finding errors in your HTML or JavaScript code.
Chrome's Web Inspector debugger can set breakpoints, step through code, examine values (Sources tab)
The interaction pane for typing in arbitrary JS expressions (Console tab; Sources tab with code and variable views [see screenshot])
Try it on your own with this example (from the screenshots)!
JSLint: an analyzer that checks your JS code, much like a compiler, and points out common errors
When your JS code doesn't work, paste it into JSLint first to find many common problems
"use strict";
your code...
Writing "use strict";
at the very top of your JS file turns on syntax checking:
You should always turn on strict mode for your code in this class
alert()
and console.log()
are useful to include in functions that you are trying to debug, and are probably going to be most helpful when debugging JavaScript in this class.
A good strategy is to start with one of these functions in the top of your .js
file as a sanity check that your script was correctly linked to the HTML
page. Then, add it to the first function that is called to check that the function was called correctly, and continue the process until you reach the line(s) of code that are not working as expected.
You may find it useful to pass in variable values throughout this process so that
you can check whether your variables (e.g., text in an HTML
tag or value
in a <input>
tag have the correct values.
alert
at the top of it and make sure it appears.
ALWAYS code with Firefox / Chrome console open
Incremental development: code a little, test a little
Follow good general coding principles:
Use lines and variables liberally:
Don't fear the Firefox/Chrome debugger
The following pages have mistakes that cause their JavaScript code not to work properly. Look at the pages, find the mistakes, and correct the problems.
Buggy Page #1:
HTML
script tag has name of .js
file misspelled. One way
to discover this bug is by putting an alert
at the top of the
.js
file, noticing that that it doesn't show, and then checking the
script tag in the HTML
.
Buggy Page #2:
HTML
script tag is self-closing (not valid; breaks whole page in Firefox),
and misspelled name of onclick
attribute. Discover by using W3C HTML Validator.
Buggy Page #3:
Many syntax errors:
Buggy Page #4:
Syntax error, missing } brace. One way to discover this error is by running JSLint.
With the Chrome or Firefox console open, write a function named crazyCaps
that accepts a string as a parameter and returns a new string with its capitalization altered such that the characters at even indexes are all in lowercase and odd indexes are all in uppercase.
For example, if a variable str
stores "Hey!! THERE!"
, the call of crazyCaps(str)
should return "hEy!! tHeRe!"
.
function crazyCaps(s) {
let result = "";
for (let i = 0; i < s.length; i++) {
if (i % 2 == 0) {
result += s[i].toLowerCase();
} else {
result += s[i].toUpperCase();
}
}
return result;
}
Modify colorifyme.html so that when the button
is clicked, it randomly decides the color of the page background. That is, it should
choose a random hex value for the background between #000000
and
#FFFFFF
. In addition, it should replace any text in the heading tag that
has the ID "mycolor" with the text, "Your Color Is <random-color>",
(where random-color is the color randomly-generated for the background).
A runnable solution is located here (don't peek at the solution code!)
Once you've got that working, make your JavaScript code unobtrusive (and way cooler) by taking out the button on the page and choosing a color randomly when the page loads.
"use strict";
window.onload = function() {
document.getElementById("colorify").onclick = changeBackgroundColor;
};
function changeBackgroundColor() {
let colorOptions = ["0", "1", "2", "3", "4", "5", "6", "7",
"8", "9", "A", "B", "C", "D", "E", "F"];
let randomColor = "#";
for (let i = 0; i < 6; i++) {
randomColor += colorOptions[Math.floor(Math.random() * 16)];
}
document.body.style.backgroundColor = randomColor;
document.getElementById("mycolor").innerText = "Your Color is " + randomColor + "!";
}
Create the file conversions.js
which is referenced by conversions.html
. Write a function convert()
in conversions.js
that takes the value in the text input and converts it from either kilograms (kg) to pounds (lb) or from pounds to kilograms, depending on the value selected in the dropdown box.
The result should be displayed in the empty span with the id of #answer
.
The conversion factor from pounds to kilograms is 0.45359237, and the conversion factor from kilograms to pounds is 2.20462262.
You should edit the HTML
file conversions.html
to add id's to the elements as necessary and you may assume valid input. A runnable version of the solution can be found here (don't peek at the solution code!)
"use strict";
window.onload = function() {
document.getElementById("calculate").onclick = convert;
}
function convert() {
let input = document.getElementById("input");
value = parseInt(input.value);
let conversion = document.getElementById("convert");
if (conversion.value == "kgtopounds") {
value *= 2.20462262;
} else {
value *= 0.45359237;
}
let answer = document.getElementById("answer");
answer.innerHTML = value;
}
Write a JavaScript file llamas.js
to be used with the given
adopt-a-llama.html
file so that when the Validate button is clicked,
every input in the form including the textarea that has a blank value (empty string)
will be highlighted with a "red" background color, as shown in the screenshots below.
If a text box already has the red background but is then changed to non-blank, and the Validate
button is clicked again, then you should remove the red background color by setting the background to
an empty string, "". You should not modify HTML or CSS code; write only JavaScript. Use
the document.querySelectorAll
function taught in lecture.
Before clicking verify button:
After clicking verify button:
"use strict";
window.onload = function() {
document.getElementById("validate").onclick = checkInputs;
};
function checkInputs() {
let inputs = document.querySelectorAll("input");
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].value < 1) {
inputs[i].style.backgroundColor = "red";
} else {
inputs[i].style.backgroundColor = "white";
}
}
let textareaInput = document.querySelectorAll("textarea")[0];
if (textareaInput.value < 1) {
textareaInput.style.backgroundColor = "red";
} else {
textareaInput.style.backgroundColor = "white";
}
}