University of Washington, CSE 190 M, Spring 2008
Lab 3: JavaScript and UI Elements (Thursday, April 17, 2008)

The purpose of this lab is to practice using basic JavaScript and UI controls to create interactive web pages. You probably won't have enough time to finish all of the exercises; finish as much as you can within the allotted time.

Lab 3: Pimp My Text!

The theme of this lab is that we'll be writing a page where the user can type some text into a box, and by clicking on various UI controls, we'll allow the user to "pimp" out the text by giving it some funny styling. You are given a skeleton HTML file named pimpmytext.html (right-click and select Save Link As...) that contains a basic HTML shell and page header. This skeleton already links to a CSS file named pimpmytext.css that defines all the simple styles you should need for this lab. You do not have to edit this provided stylesheet or write any CSS code today. The skeleton also links to a JavaScript library named Prototype that we'll use in this course, which gives us the ability to use the $() function as shown in class. Please don't remove the links to the provided CSS or Prototype JS files from the page.

You will write a JavaScript file called pimpmytext.js that will manipulate text in various ways throughout the following exercises.

Lab 3 Resources

• Monday Lecture Slides: User Interface Controls
• Wednesday Lecture Slides: JavaScript
• Chapter 3: Interactive UIs with JavaScript
• Install Firebug (Strongly suggested!)
• JSLint JavaScript code checker
• Runnable solution to this lab (so you can see how your page is supposed to look and work... Don't look at the source code, please!!)

Exercise 1: Create UI Elements (roughly 15 minutes)

The first task is to expand pimpmytext.html by adding UI controls. Add HTML code for the following:

• Add a field for users to enter large (multi-line) amounts of text. It should be 4 rows by 30 columns in size. Wrap it in a bordered field set box with the label "Text".
• Add a second bordered field set box labeled "Pimp It" that contains the following controls:
  • A button labeled "Bigger Pimpin'!"
  • A checkbox labeled "Bling"

You should roughly match the output below (between, but not including, the thick black lines).
(Don't obsess with getting the exact output; the important thing is to have the proper UI elements!)

Exercise 2: Bigger Pimpin' button (roughly 10 minutes)

Now you're going to create a basic JavaScript file so that when the user clicks "Bigger Pimpin'!", the text in the main text area will get larger. Do the following:

1. Create a new file and saving it as pimpmytext.js. Link your XHTML page to this script file. You may want to make sure that this is working by simply putting an alert in your .js file and making sure that the alert pops up when you refresh the page. For example, the following could be the entire initial contents of the file:

   alert("Hello World!");
   

2. Add JavaScript code (and any necessary modifications to the XHTML) so that when the user clicks the "Bigger Pimpin'!" button, the size of the text in the main text area changes to 24pt.

   Hint: Remember that most CSS properties translate directly into properties of the .style property within that element's DOM object. For example, the following CSS color declaration:

   #id {
     color: red;
   }
   

   …translates into:

   $("id").style.color = "red";
   

   For properties which have a hyphen in them, such as background-color, the hyphens are removed and subsequent words are capitalized:

   $("id").style.backgroundColor = "red";
   

   Don't forget to set the property to a string with proper pt units, not an integer. If your code doesn't work, try running JSLint.

Clicking the button should cause an appearance like the one below.

Exercise 3: Bling checkbox (roughly 15 minutes)

You are now going to add an event handler so that when the user checks the "Bling" checkbox, the main text area will have some styles applied to it.

1. Add JavaScript code (and any necessary modifications to the XHTML) so that when the user checks the box, the text in the text area becomes bold. You can test whether a given checkbox or radio button is checked with code such as the following:

   if ($("id").checked) { ...
   

   When the box is unchecked, the style should go back to normal.
2. Once you get the bold aspect to work, add the following additional effects to also take place when the Bling checkbox is checked:
   • underline the text (this is the CSS text-decoration property)
   • change its color to green
   • make it blink (this is also the CSS text-decoration property)
   • any two other styles of your choice

After checking the box, your text should look something like this:

Exercise 4: Snoopify (roughly 10 minutes)

Now we will transforming or "Snoopifying" the actual content of the text.

1. Write a new button named Snoopify that, when clicked, modifies the text in the text area by capitalizing it and adding an exclamation point to the end of it. You will want to use the value property of the text area's DOM element.
2. Modify your Snoopify button so that it also adds a suffix of "-izzle" to the last word of each sentence. (A sentence being a string of text that ends in a period character, "." .) Do this using the String/array methods split and join.

After finishing this exercise and clicking the button, your text should look something like this:

Exercise 5: Upload Your Page to the Web (roughly 5 minutes)

Follow the directions at our Uploading Files page to upload your page onto our Webster server. Verify that you did this successfully by viewing your page in the web browser. (Ask a TA if you have any problems logging in to Webster or uploading your files!)

Exercise 6 (for CSE Majors): Even More Gangsta

If you're a CSE major or if you finish all of the above, add the following to your page:

1. When the "Bling" checkbox is checked, also set your overall page to have a background image of:
   http://www.cs.washington.edu/education/courses/190m/08sp/labs/3-pimpify/hundred-dollar-bill.jpg
2. Make it so that when the "Bigger Pimpin'!" button is clicked, rather than hard-setting the font size to 24pt, you'll make it 2pt larger than its current size. You may want to use the parseInt function to help you do this.
3. (really tricky) Add a "Malkovitch" button that causes words of five characters or greater in length in your main text area to be replaced with the word "Malkovich". Consider compound words (i.e., contractions or hyphenated terms) to be separate words.
4. Add an "Igpay Atinlay" button that converts the text to Pig Latin. The rules of Pig Latin are:
   1. Words beginning in a consonant (or consonant cluster) have that consonant (or consonant cluster) moved to the end and -ay tacked on following.
   2. Words beginning in a vowel simply have -ay tacked on the end.
5. Add any other crazy styling or pimpin' you want to the page. Show us your best stuff, playa!