Creating a New HTML Page on the Fly Responding to the User’s Input

The HTML page containing the Image_and_Cursor applet above was created on the fly by the Javascript function in the HTML code on the next page. If you compare this Javascript code with the one-sheet instructions for adding a curve in Image_and_Cursor, you will see that this Javascript code simply writes the same code using instructions like win.document.write and win.document.writeln. Notice, however, that it inserts the user’s input from the form at the appropriate points. The key lines are the lines:

var x_low = document.response.x_low.value

which read the user’s input from the form and lines like

win.document.write("<param name = 'curve_a' value = ")

win.document.write(x_low)

win.document.writeln(">")

which insert the user’s input into the appropriate part of the new HTML page.

Warning: The HTML code on the back of this sheet must be entered without pressing the Enter Key (or Return Key) in the middle of a win.document.write or win.document.writeln statement.

<html>

<head>

<script language="JavaScript">

function respond()

{

var x_low = document.response.x_low.value

var x_high = document.response.x_high.value

var y_of_x = document.response.y_of_x.value

var win = open("", "unusedname")

win.document.writeln("<html><head><title>The Curve and the Water Fountain</title></head><body>")

win.document.writeln("<p><center><H1>The Curve and the Water Fountain</H1></center></p>")

win.document.writeln("<p><center><applet archive='Image_and_Cursor.jar' code='Image_and_Cursor' width = 701 height = 265>")

win.document.writeln("<param name = 'applet_width' value = '701'>")

win.document.writeln("<param name = 'applet_height' value = '265'>")

win.document.writeln("<param name = 'image_width' value = '481'>")

win.document.writeln("<param name = 'image_height' value = '223'>")

win.document.writeln("<param name = 'backdrop_filename' value = 'water_fountain_1.gif'>")

win.document.writeln("<param name = 'display_sw' value = '0'>")

win.document.writeln("<param name = 'display_placement' value = '1'>")

win.document.writeln("<param name = 'curve_sw' value = '1'>")

win.document.writeln("<param name = 'curve_n' value = '100'>")

win.document.writeln("<param name = 'curve_color' value = '255000000'>")

win.document.write("<param name = 'curve_a' value = ")

win.document.write(x_low)

win.document.writeln(">")

win.document.write("<param name = 'curve_b' value = ")

win.document.write(x_high)

win.document.writeln(">")

win.document.write("<param name = 'curve_y_of_x' value = '")

win.document.write(y_of_x)

win.document.writeln("'>")

win.document.writeln("</applet></center></p>")

win.document.writeln("</body></html>")

win.document.close()

}

</script>

<title>Lite Applets, Forms, and Javascript</title>

</head>

<body>