A B C
D E
G H I

DOM Practice Examples I

The links below cause changes to the table at right rather than taking you to a new page. To undo the changes, hit the refresh button on your browser.

Change A's background to red.
Change E's background to blue.
Change F's background to green.
Change B's foreground to purple.
Change A's foreground to yellow.
Change C's font to Arial.
Change B's font to Arial.
Change E's font to Comic Sans MS.
Change C's font to Comic Sans MS.
Change I to J.

Now it's your turn. Below are some features to add to this page. Each instruction describes a new function and link you should add to the page.

  1. Create a new function based on topleftRedBG(), called bottomrightPurpleFG(), that will change the I's foreground to purple. Add a link that calls the new function. (Hint: cut and paste a copy of the function and link you are using as a base. Then change the parts that need changing. Don't forget to modify the comment as appropriate!)
  2. Create a new function that will change D's foreground to pink. Add a new link that calls the new function.
  3. Create a new function that will change H's font to Webdings. Add a new link that calls the new function.
  4. Add two new functions and links that change the style of some square in some way that we haven't seen yet. (For example, change the font-size, font-style, font-variant, text-decoration, etc.)
  5. Based upon bottomrightJ(), add a function and a link that changes A to Z.
  6. (Optional challenge problem:) Again based upon bottomrightJ(), add a function and a link that replaces G with an image tag pointing to the image at http://www.cs.smith.edu/~nhowe/teaching/csc105/examples/g/x.gif.

Functions with Arguments

The functions used above are all simple functions with no arguments. Since many of them accomplish similar things, it would be more efficient to write functions with arguments that could be reused. A few examples appear below, with experiments for you to try out. (View the page source to see the scripts.)

Change C's background to yellow
Change C's background to black
Change D's background to yellow

  1. Create a new link that changes G's background to aqua using the changeBG() function.
  2. Create a new link that changes F to M using the changeContents() function.
  3. Create a new function based on changeBG(), called changeFG(), that will change any square's foreground to any color. Add two new links that call the new function.
  4. Create a new function based on changeBG(), called changeFontSize(), that will change any square's letter to a specified size. Add two new links that call the new function.
  5. Add three new links using the changeStyle() function. One should change the background color of some cell, one should change the font-family, and one should change the font size.