Exercise 11 - Beginning Javascript Times Table Using Prompt Box and a Form Textbox for Input

EXERCISE 11 - BEGINNING JAVASCRIPT –TIMES TABLE – USING PROMPT BOX AND A FORM TEXTBOX FOR INPUT

The following tasks should be completed using Code View in Dreamweaver or Notepad++. Create a folder named BeginningJavaScript on your working area (if the folder does not already exist), and save each file to this folder with a suitable name.

Do not forget to add the extension .html or (.htm) otherwise you will not be able to view the output in a browser.

You are going to create a script which displays the times table. The user will enter the times table required by entering a value into a prompt box.

The value entered is then stored in a variable.

A loop (forloop) will be used to display the times table output line by line – to a maximum of 12 lines. For each line of output the value by which the chosen number is multiplies by is incremented from 1 to 12.

Exercise 11a

Using Code View in Dreamweaver or Notepad++, enter the following text:

<html>

<head>

<title>Times Table - Input by Prompt Box</title>

</head>

<body>

<script type = "text/javascript">

<!--

var times_table;

times_table = parseInt(window.prompt("Enter the times table required", 0));

document.write("<h1>Times Table</h1>");

var i;

for (i=1; i <=12; i++)

{

document.write((i + " x " + times_table + " = " + (i * times_table)) + "<br />");

}

//-->

</script>

</body>

</html>

Save the file as exercise11a.html and view the page in your browser.

The output should appear similar to that shown below:

We will now use a tabular layout to make the output appear more uniform:

Exercise 11b

Edit your code from exercise11a.html as follows:

<html>

<head>

<title>Times Table - Input by Prompt Box– Table Layout</title>

</head>

<body>

<script type = "text/javascript">

<!--

var times_table;

times_table = parseInt(window.prompt("Enter the times table required", 0));

document.write("<h1>" + times_table + " Times Table</h1>");

var i;

document.write("<table cellpadding = '5'>");

for (i=1; i <=12; i++)

{

document.write("<tr<td>" + i + "</td<td>" + " x " + "</td<td>" + times_table + "</td<td>" +" = " + "</td<td>" + (i * times_table) + "</td</tr>");

}

document.write("</table>");

//-->

</script>

</body>

</html>

Save the file as exercise11b.html and view the page in your browser.

A variation of the above script is to declare a variable called output and to incrementally add the elements of the display to this variable. The contents of the variable output is then written to the web page.

Exercise 11c

Edit your code from exercise11b.html as follows.

<html>

<head>

<title>Times Table - Input by Prompt Box – Table Layout</title>

</head>

<body>

<!--

var times_table;

var output = "";

times_table = parseInt(window.prompt("Enter the times table required", 0));

document.write("<h1>" + times_table + " Times Table</h1>");

var i;

output = "<table cellpadding = '5'>";

for (i=1; i <=12; i++)

{

output += "<tr<td>" + i + "</td<td>" + " x " + "</td<td>" + times_table + "</td<td>" +" = " + "</td<td>" + (i * times_table) + "</td</tr>";

}

output += "</table>";

document.writeln(output);

//-->

</script>

</body>

</html>

Save the file as exercise11c.html and view the page in your browser.

Note the use of += as in:

output += "</table>";

This is the same as writing:

output = output + "</table>";

The following code is a variation of the above. The output is displayed in a new window.

Exercise 11d

Edit your code from exercise11c.html as follows.

<html>

<head>

<title>Times Table - Input by Prompt Box – Table Layout – New Window</title>

</head>

<body>

<!--

var times_table;

var output = "";

times_table = parseInt(window.prompt("Enter the times table required", 0));

document.write("<h1>" + times_table + " Times Table</h1>");

var i;

output = "<table cellpadding = '5'>";

for (i=1; i <=12; i++)

{

output += "<tr<td>" + i + "</td<td>" + " x " + "</td<td>" + times_table + "</td<td>" +" = " + "</td<td>" + (i * times_table) + "</td</tr>";

}

output += "</table>";

var nw = window.open("", "Times_Table","top=40,left=40, width=200,height=300, scrollbars");

nw.document.writeln(output);

document.writeln(output);

//-->

</script>

</body>

</html>

Save the file as exercise11d.html and view the page in your browser.

In the above examples the user has entered data via a Prompt box. It is more usual for users to enter data in a form's textbox.

The following example enables the user to enter the times table value in a textbox. When the TimesTable button is clicked, the display_timestable() function is called. The display_timestable() function produces the output.

Exercise 11e

Edit your code from exercise11d.html as follows.

<html>

<head>

<title>Times Table - Input by Textbox – Table Layout - Functions</title>

</head>

<body>

<h1>Times Table</h1>

Enter the times table required:

<p<input type = "text" name = "timestable" id = "timestable" /</p>

<p<input type = "button" value = "Times Table" onclick = "display_timestable()" /</p>

</form>

<!--

function display_timestable()

{

var times_table;

var output = "";

times_table = parseInt(document.getElementById("timestable").value);

output = "<h1>" + times_table + " Times Table</h1>";

var i;

output += "<table cellpadding = '5'>";

for (i=1; i <=12; i++)

{

output += "<tr<td>" + i + "</td<td>" + " x " + "</td<td>" + times_table + "</td<td>" +" = " + "</td<td>" + (i * times_table) + "</td</tr>";

}

output += "</table>";

document.writeln(output);

}

//-->

</script>

</body>

</html>

Save the file as exercise11e.html and view the page in your browser.

We will now edit this file to add a link at the end of the output which will return the user to the previous page.

Edit the above file by adding the line:

output += "<br /<a href = '#' onclick = 'window.history.go(-1)'>Back to Previous Page</a>";

straight after output += "</table>";

Re-save the file as exercise11e.html and view the page in your browser.

It would be useful if the form's textbox was cleared and focus was placed in this textbox every time the form is reloaded.

We can do this by creating an init() function. The init() function is called every time the page is loaded.

Note that the init() function is called in the line:

Exercise 11f

Edit your code from exercise11e.html as follows.

<html>

<head>

<title>Times Table - Input by Textbox – Table Layout – Functions</title>

<!--

function init()

{

document.getElementById("timestable").value = "";

document.getElementById("timestable").focus();

}

//-->

</script>

</head>

<body onload = init()

<h1>Times Table</h1>

Enter the times table required:

<p<input type = "text" name = "timestable" id = "timestable" /</p>

<p<input type = "button" value = "Times Table" onclick = "show_timestable()" /</p>

</form>

<!--

function show_timestable()

{

var times_table;

var output = "";

times_table = parseInt(document.getElementById("timestable").value);

output = "<h1>" + times_table + " Times Table</h1>";

var i;

output + = "<table cellpadding = '5'>";

for (i=1; i <=12; i++)

{

output += "<tr<td>" + i + "</td<td>" + " x " + "</td<td>" + times_table + "</td<td>" +" = " + "</td<td>" + (i * times_table) + "</td</tr>";

}

output += "</table>";

output += "<br /<a href = '#' onclick = 'window.history.go(-1)'>Back to Previous Page</a>";

document.writeln(output);

}

//-->

</script>

</body>

</html>

Save the file as exercise11f.html and view the page in your browser.

As we have seen previously the output can be written to a new window.

Exercise 11g

Edit your code from exercise11f.html as follows.

<html>

<head>

<title>Times Table - Input by Textbox – Table Layout – Functions</title>

<!--

function init()

{

document.getElementById("timestable").value = "";

document.getElementById("timestable").focus();

}

//-->

</script>

</head>

<h1>Times Table</h1>

Enter the times table required:

<p<input type = "text" name = "timestable" id = "timestable" /</p>

<p<input type = "button" value = "Times Table" onclick = "display_timestable()" /</p>

</form>

<!--

function display_timestable()

{

var times_table;

var output = "";

times_table = parseInt(document.getElementById("timestable").value);

output = "<h1>" + times_table + " Times Table</h1>";

var i;

output += "<table cellpadding = '5'>";

for (i=1; i <=12; i++)

{

output += "<tr<td>" + i + "</td<td>" + " x " + "</td<td>" + times_table + "</td<td>" +" = " + "</td<td>" + (i * times_table) + "</td</tr>";

}

output += "</table>" + "<a href='#' onclick = 'self.close()'>Close</a>";

var nw = window.open("", "Times_Table","top=40,left=40, width=200,height=300, scrollbars");

nw.document.writeln(output);

}

//-->

</script>

</body>

</html>

Save the file as exercise11g.html and view the page in your browser.

In the final script, we will simply move the function display_timestable() to the <head section of the web page.

The output will be exactly the same as the previous example.

Exercise 11h

Edit your code from exercise11g.html as follows.

<html>

<head>

<title>Times Table - Input by Textbox – Table Layout – Functions</title>

<!--

function init()

{

document.getElementById("timestable").value = "";

document.getElementById("timestable").focus();

}

function display_timestable()

{

var times_table;

var output = "";

times_table = parseInt(document.getElementById("timestable").value);

output = "<h1>" + times_table + " Times Table</h1>";

var i;

output += "<table cellpadding = '5'>";

for (i=1; i <=12; i++)

{

output += "<tr<td>" + i + "</td<td>" + " x " + "</td<td>" + times_table + "</td<td>" +" = " + "</td<td>" + (i * times_table) + "</td</tr>";

}

output += "</table>" + "<a href='#' onclick = 'self.close()'>Close</a>";

var nw = window.open("", "Times_Table","top=40,left=40, width=200,height=300, scrollbars");

nw.document.writeln(output);

}

//-->

</script>

</head>

<h1>Times Table</h1>

Enter the times table required:

<p<input type = "text" name = "timestable" id = "timestable" /</p>

<p<input type = "button" value = "Times Table" onclick = "display_timestable()" /</p>

</form>

</body>

</html>

Save the file as exercise11h.html and view the page in your browser.

A - Beginning JavaScript - Ex11 - Times Table - Prompt Box and a Form Textbox for Input

Page 1 of 18Version 3