Web Programming Step by Step
Discussion Section 5: Order-It
Basic JavaScript

section idea/code by Sylvia Tashev and Stefanie Hatcher

This section is about using JavaScript to create an interactive UI.

Buggy JavaScript Code:

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.

1. buggy page #1 (JavaScript)
2. buggy page #2 (JavaScript)
3. buggy page #3 (JavaScript)
4. buggy page #4 (JavaScript)

The following links may help you in the debugging process:

• Firebug
• W3C Validators: XHTML, CSS
• JSLint
• Bonus Lecture Slides - Debugging JavaScript

Order-It:

Today we'll 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 Sylvia Tashev and Stefanie Hatcher): (solution JS code orderit.js)

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 following 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.
• 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.
  

Recall that you can retrieve the JavaScript "DOM" object for a given HTML element with the document.getElementById function. Recall that an array has a length field and methods such as: concat, join, pop, push, reverse, shift, slice, sort, splice, unshift

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.