To Notes

IT 130 -- 2/22/10

Review Questions

1. What is the result of each of these JavaScript code fragments?

   a.  var m = parseFloat(document.frm1.txtA.value);
       var f = m * 5280;
       document.frm1.txtB.value = f;
   
       If 20 is the value of txtA, what will be the value in
       txtB after the JavaScript code executes.   
   
       Ans: 10560
       
   b.  What is displayed in the alert box?
   
       var x = 5;
       x = x + 1;
       var a = cat + x + dog
       window.alert(a);
   
       Ans: cat6dog
       
   c.  var s;
       var n = parseFloat(document.frm1.txtA.value);
       n = n + 2;
       if (n > 6)
       {
           s = big;
       }
       else
       {
           s = small;
       }
       window.alert(s);
   
       What is shown in the alert box if 5 is entered in 
       the textbox?
       
       Ans: big
   

2. What is a div tag?
    
   Ans: div tags delimit a section of a webpage to which CSS statements can be applied.
    
3. What is absolute positioning?
    
   Ans: Absolute positioning means that div tags are positioned with respect to the upper left corner of the page using the left and top properties. This is in contrast with relative positioning, which positions a section with respect to the preceding section.
    
4. What do the following HTML and CSS pages display in a browser?
    
   
   HTML Page   External CSS Stylesheet
   
   
5. How do you make the text flow around an image?
    
   Ans: By using CSS statements float: left or float: right.

Using Repetition (While Loops)

• Structured Programming
   
• Look at the source code of these examples:
   
  
  100-bottles-of-beer.htm   fair-coin-test.htm

  fair-die-test.htm   snake-eyes.htm

Practice Problems

1. What is the result of this JavaScript code fragment?
   

       var n = 1;
       while (n <= 20)
       {
           window.alert(n);
           n = n + 3;
       }
       
       Ans: 1
            4
            7
           10
           13
           16
           19
   

2. Modify problem 3 to count backwards by sevens, starting at 1000.

   Ans: var n = 1000;
        while (n >= 0)
        {
            window.alert( );
            n = n - 7;
        }
   

Getting Webpages To and From the Server

• Domain Name Services

Server Side Processing

• Client-side processing means processing information entered on a webpage entirely by the browser.
   
• Server-side processing means sending information entered on a webpage back to the server and processing it there. This might mean using this information to update databases stored on the server.
   
• Prototype Order Form seeds1.htm
   
• Order Form That Submits Page back to the Server seeds2.htm
   
• Entry Form with More Controls entry-form.htm
   
• Source code for PHP page running on server at http://www.depaul.edu/~sjost/confirmation.php.
   
• Information on the submitted form is passed back to the server in the URL.
   
• The following URL passes back Larry in the txtName textbox and 36-35 in the ddmAge dropdown menu:
   
  http://condor.depaul.edu/~sjost/confirmation.php?txtname=Larry&ddmage=36-45
   

A Menu with Hidden Submenus

• Hide Submenus Example, Example 78 on Examples Page.

JavaScript Examples for the Website Project

• Real-time Date and Time real-time-date.htm
   
• Slide Show slide-show.htm

Project 6

• Use the check-x.htm and pass-fail.htm Examples to finish Project 6.
   
• Here is the Project 6 Description.

Practice Problems

1. Modify the Slide Show Example to:
    
   
   1. Show random images.
       
   2. Show a random image when the page is loaded. The image should not change until the page is reloaded.

More Examples with Buttons and Images

1. Use a button to manually advance a slide show:
    
   
   Button Slide Show 1 Example
   
   
2. Use the mousedown and mouseup events and two images to simulate pressing and releasing a button. Also incorporate the mouseover and mouseout events to change an image.
    
   
   Button Slide Show 2 Example
   
   
3. Use a link instead of a button to advance the slideshow.
    
   
   Link Slide Show Example
   
   
4. Use a button instead of a link to change pages.
    
   
   Button Instead of Hyperlink Example
   
   To change the page with JavaScript, change the document.URL property.

Disappearing Acts and Other Magic Tricks

• Look at the Disappear Example.
   
• To alter values of the CSS style of a tag, spell the property name with camel casing, instead of using dashes between words.
   
• Example: Suppose that the tag is
   
  

  <p id=a style=background-color:pink;>
  

  Use this JavaScript statement to change the background color of the document:

  document.getElementById(a).style.backgroundColor = beige;
  

  or

  document.getElementById(a).style.backgroundColor = rgb(255,255,230);
  

  or

  document.getElementById(a).style.backgroundColor = #FFE0FF;
  

• Use the innerHTML property of a tag to change the actual text of the tag.

Changing Background Color Dynamically

• Change the background color by using the getElementById function to get the body and then changing the backgroundColor property of the body style. Use a user defined rgb function to get the hex color code corresponding to r, g and b values.
   
  
  Background Color Change Example