2/24/10 Notes

IT 130 -- 2/24/10

Review Questions

What does DNS mean?

Ans: Domain Name Services or Domain Name System
Identify the parts of this URL:
Describe the steps that a browser must take to request, obtain and display a web page. Ans:
1. User enters requested URL in browser.
2. Browser sends request to DNS (domain name services) to get IP address of server. This could involve multiple hops, including the top-level domain server for edu, and a second-level domain server like for depaul.edu.
3. Browser obtains IP address of server.
4. Browser sends request for web page to IP address of server. This is an HTTP GET request.
5. Server sends page back to server. The client IP address was contained in the request.
6. Browser displays the web page.

Write a JavaScript event handler that randomly displays one of the images 1.jpg, 2.jpg, or 3.jpg in the image location imgPicture. Ans:

function display( )
{
    var n = 1 + Math.floor(3 * Math.random( ));
    if (n == 1)
    {
        document.images.imgPicture.src = 1.jpg;
    }
    else if (n == 2)
    {
        document.images.imgPicture.src = 2.jpg;
    }
    else
    {
        document.images.imgPicture.src = 3.jpg;
    }
}

or

function display( )
{
    var n = 1 + Math.floor(3 * Math.random( ));
    document.images.imgPicture.src = n + .jpg;
}

Write a definition for imgPicture. Ans:
```
<img name=imgPicture />
```
Write a body tag that automatically calls the event handler when the page loads or is refreshed. Ans:
```
<body onload=display( );>
```
Write an external style that sets the size of imgPicture as 1.5in x 1.0in. Ans:
```
    img { width : 1.5in; height : 1.0in; }
```

How do you designate a source code comment in (a) HTML, (b) CSS, (c) JavaScript? Ans:

<!-- This is the HTML source code comment -->

/* This is the CSS comment */

// This is the JavaScript comment.

CSS Classes

A CSS Class is a named inline style that can be applied to individual CSS tags by name.
This CSS code defines the class named big:
Here is how to apply the class to an image:
This class may be useful for Project 6 because most of the images are green checks or red xs of the same size. Their size can be defined using an img selector in the external CSS file.
The face image is a larger size. Its size can be set using the big class defined above.

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

JavaScript Examples for the Website Project

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

Practice Problems

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

Project 6

Finish Project 6.