University of Washington CSE 154

Section 6: JavaScript

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Debugging

The following links may help you in the debugging process:

Bonus Lecture Slides - Debugging JavaScript
Firebug, Chrome Dev Tools
Validators: W3C HTML, W3C CSS, JSLint
Use alert() and console.log() to print debug messages.
Write "use strict"; at top of script file to enable strict syntax checking.

Exercise : Buggy Javascript

The following pages have mistakes that cause their JavaScript code not to work properly. Look at the pages, find the bug(s), and correct the problems.

Exercise Solution

buggy1: HTML script tag has name of JS file misspelled. Discover by putting alert at top of JS file, noticing that it doesn't show, checking script tag.
buggy2: HTML script tag is self-closing (not valid; breaks whole page in FF), and misspelled name of onclick attribute. Discover by using W3C HTML Validator.

Exercise Solution

buggy3: many syntax errors:
- semicolon after () in function header
- '' instead of " to close string
- Alert shouldn't be uppercase
- ) instead of } to close function
Discover by looking at Firebug error console, and/or by running JSLint.
buggy4: syntax error, missing } brace. Discover by running JSLint (error message more helpful than Firebug's).

Exercise : Font Manipulation (by Rishi Goutam)

Using the browser's Javascript console, modify font.html by changing the following in the paragraph #text:

the text of the paragraph to something of your choice
the font, font size, and color of the text

Once you have achieved these modifications, add your code to the page so that clicking the "Prettify" button will apply them. A runnable solution is located here (Don't peek at the code!).

Now, make it so that the JavaScript code is unobtrusive - ie there is no onclick handler in the HTML file

Exercise Solution

<div>
	<button id="prettify" onclick="prettify();">Prettify</button>
</div>

function prettify() {
   var text = document.getElementById("text");
   text.innerHTML = "Look! It's pretty!";
   
   // font styles added by JS:
   text.style.fontSize = "13pt";
   text.style.fontFamily = "Comic Sans MS";
   text.style.color = "red";
}

Exercise : Sometimes Red, Sometimes Blue

Modify redblue.html so that when the button is clicked, it randomly decides whether the background color of the page should be red, or if the background color of the page should be blue. Hint: You can use document.body to access the page's body in JavaScript.

A runnable solution is located here. (Don't peek at the solution code!)

Once you've gotten 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.

Exercise Solution

<button onclick="chooseColor();">RedBlue?!</button>

function chooseColor() {
    var choice = Math.round(Math.random());
    if(choice == 1) {
       document.body.style.backgroundColor = "blue";
    } else {
       document.body.style.backgroundColor = "red";
    }
}

Exercise : Weight Conversion

Create the file conversions.js referenced by conversions.html. Write a function convert() in conversions.js that takes the value in the text input and converts it from either from kilograms to pounds or from pounds to killograms depending on 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 ids to the elements as necessary and you may assume valid input. A runnable version of the solution is here. (Don't peek at the solution code!)

Exercise Solution

Solution conversions.html, and conversions.js:

function convert() {
   var input = document.getElementById("input");
   value = parseInt(input.value);
   
   var conversion = document.getElementById("convert");
   if (conversion.value == "kgtopounds") {
      value *= 2.20462262;
   } else {
      value *= 0.45359237;
   }
   
   var answer = document.getElementById("answer");
   answer.innerHTML = value;
}

Exercise : Order-It

Write a page that lets us perform various manipulations on the text in a text area. Here is the page (click the image to run our sample solution, written by TAs Sylvia Tashev and Stefanie Hatcher):

Exercise : Order-It

The HTML and CSS are already written, but we must add JavaScript code to make the UI respond when the user clicks the buttons. Start from the skeleton orderit.html.

Add the following behavior to the buttons:

Clear All: Deletes all text from the text area.
Capitalize: Converts the text to upper case.
Sort: Rearranges the lines into sorted alphabetical order.
Reverse: Reverses the order of the lines.

Exercise : Order-It Hints

You can retrieve the JavaScript "DOM" object for a given HTML element with the document.getElementById function.
A string has a split method to break it into an array of smaller strings.
An array has a length field and methods such as: concat, join, pop, push, reverse, shift, slice, sort, splice, and unshift.

Exercise : Order-It

More Behavior to add:

Add Line Numbers: Places a number in front of each line, such as "1. " (Don't worry about the possibility that the lines might already have numbers in front of them.)
Strip Blank Lines: Removes any blank/empty lines from the text area.
Shuffle: Rearranges the lines into a random order. JavaScript doesn't have a shuffle method for arrays, but you can write one using the following algorithm:
```
	for each index i:
	  randomly choose an index j >= i.
	  swap lines i and j.
```

If you finish all of that behavior, consider adding a button to change the capitalization of lines, such as capitalizing/lowercasing entire lines or converting lines to AlTeRnAtInG cAsE.

Exercise Solution

Solution files: