Lab 9 - It 130

  1. This is one html file. This part of the lab will show you how to do a two column layout using css. Get the HTML code for http://condor.depaul.edu/~alarrain/hci201/examples/hw1nostyle.html

    2. View Source and save the code into your local system. Make sure the file name is hw1com.html

    1. You will add the styles using an external stylesheet. Create a text file and save it as twocolstyle.css
    2. Add the following styles to the stylesheet, but first link the HTML file to the stylesheet. Add the following html code to the head section of the HTML document.
      3. <link href="twocolstyle.css" rel="stylesheet" type="text/css" />
    3. Now add the styles to twocolstyle.css #header { background:#CCC; padding:15px; } #main { background:aqua; float:left; width:60%; padding-left:2%; } #main li { line-height:1.4em; } #rightbar { margin-right:5%; margin-left:62%; } #rightbar h2 { margin:0; padding:0; } body { font-family:verdana, sans-serif; margin-right:5%; margin-left:2%; }
    4. Add some of your own styles to make the document look visually appealing.
  2. Write a complete Javascript program to compute the future value of an investment compounded annually using the formula.
    3. P * (1 + R / 100 )  Y 

Where P is the amount invested
R is the annual rate
Y is the number of years.
    In the above formula the expression (1 + R / 100) is the base and Y is the exponent. The equivalent javascript statement would be P * Math.pow( (1 + R / 100), Y);
  3. Get the code for oldMac1.html http://condor.depaul.edu/~alarrain/it130/js/oldMac1.html
    Modify the program to print out two more verses. Pick two any two animals and their corresponding sounds.
  4. Type in the following javascript code. Save the file as freemoney.html
    5. <html> <head> <title>First Example handling events it130 </title> <script type="text/javascript"> function displayMessage() { alert("Nothing in life is free"); } </script> </head> <body> <form> <input type="button" value="Click here for free money" onclick="displayMessage();" /> </form> </body> </html>
  5. Modify freemoney.html so that the program will display a second alert box after the user presses the okay button on the alert box.
    6. Before you begin make sure you understand the code.
  6. Copy and paste the following javascript program. Run it a couple of times. There is a logic error, see if you can spot it and correct it.
    7. <html> <head> <title>Demonstrate a user defined function that accepts no parameters</title> <script type="text/javascript"> function roll() { var die1,die2,result; die1 = 1 + Math.floor(Math.random() * 6); die2 = 1 + Math.floor(Math.random() * 6); result = die1 + die2; return result; } </script> </head> <body> <script type="text/javascript"> dice = roll(); alert("You Rolled " + dice); alert("Roll again "); alert("You rolled " + dice); alert("Later"); </script> </body> </html>
  7. Work on previous labs.
  8. Work on hw3.