Creating Dynamic Web Pages with Programming

In this page we discuss how web pages can be made to interact with the user to provide a dynamic experience. This done with programming. Javascript is the name of the primary programming language used for writing programs that run within a Web page.

An Example

Look at the Web page given below.

Adding Dynamism

What we have demonstrated with this simple example is that it is possible to make a Web page dynamic in the sense that it can respond to user input to change the aspects of the Web page itself.

How it Works—Retrieving the Original Web Page

Let's look under the hood to see how this works.

First, of course, the browser obtains the Web page seen above based on a URL. The source code for this page is shown below.

How it Works—Retrieving Other Information Requested in the Original Web Page

<link rel="stylesheet" href="pagestyle.css"/>

Remember that the browser processes a page from the top down in order. So when it reaches this line, it must send a message back across the Internet to retrieve the style sheet whose address is given in the link. What it retrieves is the following CSS page.

The line highlighted in orange above is:

<script src="colorSetter.js"></script>

The file it causes the browser to retrieve is this:

This is a very simple Javascript program.

How it Works—Applying the CSS and Javascript to the Web Page

So now the browser has three pages to work with as it does its job:

1. The HTML file it retrieved at the first
2. The CSS file it retrieved when it processed the yellow line
3. The Javascript file it retrieved when it processed the orange line.

With the CSS file, the browser can style the page with

• a level one header that is centered and colored red
• two level two headers that are placed at the right margin and colored blue
• a rectangular box with a red background that is 100 pixels high and 50 pixels wide, centered on the page

We reproduce the Web page as it first appears again here.

The difference between this page and others we have looked at is that this one allows dynamic changes to be made to the page by way of user input. How does this work?

How it Works—Executing the Javascript

So how does the Javascript come into play? We have seen that each time we place the cursor over the rectangle a message box comes up that allows us to enter a hexadecimal code for a color. The result is that the background color of the rectangle changes accordingly.

The key is in the line highlighted in green in the source code for the original Web page above. This line is:

<div id="colorPanel" onMouseOver="colorSetter()"></div>

When the browser processes this line it does four things:

1. The Browser Creates the Rectangle Seen in the Page

The browser does this by creating a division <div>of the page that is 100 pixels high by 50 pixels wide and places it centered on the page with a background color of red. How did the browser know to do this? In the downloaded stylesheet there was this style directive:

#colorPanel{
	height: 100px;
	width:  50px;
	border:thin solid black;
	background-color: red;
	position: relative;
	margin-left:auto;
	margin-right: auto;
}

Notice the name of this style directive: #colorPanel. The browser will thus style the one page tag that has the "id=colorPanel" set according to this style information.

2. The Browser Remembers that this <div> Tag has the Identifier "id=colorPanel"

Thus any time the name "colorPanel" is used the browser will know that it is this <div> page element that is being referenced. ID's are unique. An ID name can only be used once to identify a page element in a Web page.

3. The Browser Puts Itself on Alert to Recognize an onMouseOver Event

Since this div has the onMouseOver event listed, the browser will recognize this event whenever the mouse is placed in this div (the red rectangle).

4. The Browser Executes the Javascript function colorSetter() Each Time the onMouseOver Event Occurs

Notice that the onMouseOver event is written "onMouseOver=colorSetter()", which means, "Browser, when you detect that the mouse has been placed in this div (the red rectangle) execute the Javascript function colorSetter()."

Recall what the Javascript code looks like:

// JavaScript Document 
function colorSetter() {
      var newBackgroundColor = prompt("Type hexadecimal color value", "Dummy");
      colorPanel.style.backgroundColor=newBackgroundColor; 
}

The following should be noted.

• Line 1 is just a comment and is ignored by the browser
• Line 2 identifies this Javascript code as a function named colorSetter(), the one that is to be called by the browser when the onMouseOver event is detected.
• Line 3 creates a variable called newBackgroundColor A variable is a name that can hold a value. The prompt in line 3 is what generates the box that allows you to type in a hexadecimal color value. That is, it generates a prompt to the user to do something. The word "Dummy" is placed in the prompt and is to be replaced by a hexadecimal number typed in by the user. Whatever the user types is then placed in the variable newBackgroundColor.
• Line 4 sets the background style element of colorPanel (the name of the div that is the red rectangle) to the newly acquired hexadecimal color value.

The browser updates the display of the Web page so that the new background color is displayed in the rectangle.