original lab idea and code by Victoria Kirst and Kevin Wallace; revised by Brian Le and Marty Stepp
The purpose of this lab is to practice using basic JavaScript and UI controls to create interactive web pages.
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.
The first task is to expand pimpmytext.html by adding UI controls. Add HTML code for the following:
You should roughly match the output below (between, but not including, the thick black lines). (Don't worry too much about getting the exact output; the important thing is to have the proper UI elements!)
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:
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!");
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 that 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, look for red Firebug error messages on the bottom-right in your browser, or try running JSLint.
Clicking the button should cause an appearance like the one below.
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.
checked property of the box's DOM object. When the box is unchecked, the style should go back to normal.
text-decoration property)greentext-decoration property)The best design for this feature would be to place the above style rules into a class in your .css file and apply that class to the element when the box is checked. After checking the box, your text should look something like this:
Now we will transforming or "Snoopifying" the actual content of the text.
value property of the text area's DOM element.
"-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. For example, if you wanted to change all spaces with underscores in a string, you could write:
var str = "How are you?"
var parts = str.split(" "); // ["How", "are", "you?"]
str = parts.join("_"); // "How_are_you?"
After finishing this exercise and clicking the button, your text should look something like this:
If you finish all of the above, add the following to your page:
http://www.cs.washington.edu/education/courses/190m/09sp/labs/5-pimpify/hundred-dollar-bill.jpg
parseInt function to help you do this.Pig Latinare:
