How to return a value with randomInteger()

search711

05-26-2009, 04:28 PM

I'm wanting to know how I would return a value with randomInteger().
This is for visual confirmation with images 0-9 all images. Are 0.jpg through
9.jpg.

function randomInteger(size) {
return Math.floor((size+1)*Math.random());
}

I'm placing this code in External file sheet.

The question to my problem is:

Add a second script element for code to be placed in the document.
within the second script element, create a function named showImg(). The purpose of this function is to write an inline image into the current document document. The function has no parameters. Add the following statements to the function:
a. Add the following multiline comment to the start of the showImg()function: The showImg() function displays a random to thwart hackers attempting to enter the library records database by requiring visual confirmation.
b. Declare a varible and named imgNumber equal to the value returned by the randomInteger() function. Use 9 as the value of the size parameter int he randomInteger() function.
c. Append the statement that creates the imgNumber variable with the following single-line comment.
Return a random number from 0-9
d. insert a command that writes the following the text to the document:
<img src='imgNumber.jpg' alt=' ' />..I guesing it will a image num. 0.jpg for instance.
5.Scroll down to the bottom of the file and locate the last table cell in the document. Within this empty table cell, insert a script element.
6. Within the script element, call the showImg()function five times.

<title>Monroe Public Library</title>
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="random.js"></script>
</head>

<body>
<p id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</p>

<div id="links">
<span>Quick Links</span>
<a href="#">Home Page</a>
<a href="#">Online Catalog</a>
<a href="#">Friends of MPL</a>
<a href="#">New Books and Other Good Reading</a>
<a href="#">Illinois Virtual Library</a>
<a href="#">Internet Public Library</a>
<a href="#">Services and Collection</a>
<a href="#">Adult Programs</a>
<a href="#">Teen Central</a>
<a href="#">Children's Room</a>
<a href="#">Computers at MPL</a>
<a href="#">Computer Rules and Procedures</a>
<a href="#">Staff Directory</a>
<a href="#">Library Records</a>
</div>

<div id="main">
<h2>Library Records</h2>

showImg()
<p>To view the library records, enter your username and password.</p>

<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Username</th>
<td><input size="20" /></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" size="20" /></td>
</tr>
<tr>
<td>As a final security check, enter the 5 numbers
you see displayed below.</td>
<td><input size="6" /></td>
</tr>
<tr>
<td colspan="2" class="center">
<input type="button" value="View Library Records" />
</td>
</tr>
<tr>
<td colspan="2" class="center">
</td>
</tr>
</table>
</div>

<address>
<b>Monroe Public Library</b>
580 Main Street, Monroe IL 45812   54890
<b>Phone</b>(612) 555-0211
<b>Fax</b>(612) 555-0241
</address>

</body>
</html>

Philip M

05-26-2009, 05:44 PM

See forum rules re homework.

search711

05-27-2009, 01:11 AM

Did not mean for it my ? to sound like homework. I'd recently purchased this particular book to learn more about JS, although this book is student in nature. I'm not in school, I'm teaching myself Web Design by purchasing books from Amazon every week.

Don't want to say it, but I'm new to this whole Industry from posting 2 web design.

My next post I will try to keep it more professional.

Philip M

05-27-2009, 08:00 AM

OK. But I am not sure that I understand your question.

function randomInteger(size) {
return Math.floor((size+1)*Math.random());
}

The function generates a random integer bewteen 1 and the value of size passed to the function. So if size = 10 the number can be anything from 1 -10. The result is retuned to the calling function.

Try it:-

<script type = "text/javascript">

function randomInteger(size) {
for (var i = 0; i < 10; i++) {
alert (Math.floor((size+1)*Math.random()));
}
}

randomInteger(10)

</script>

Ninety-nine percent of the adults in this country are decent, hard-working, honest Englishmen. It's the other lousy one percent that get all the publicity. But then - we elected them.

search711

05-27-2009, 04:33 PM

I'm building a web site that I would like to incorporate and random visual confirmation with images. My web site is http:robinsonwebads.com "not a plug" for refernce only.

My ? is:

I'm placing randomInteger(size) {
return Math.floor (size+1)*Math.random();
}

In my .js file to be placed in head of doc.

I have figure out that I must create a variable and call function. Which will write to the document(<img src='imgNumber.jpg' alt=' ' />
imgNumber will be variable and showImg will be the function. I'm going to use 9 images with file name 0.jpg - 9 jpg. size=9 will be use for my value.

/* this is a very crude layout
I want use to this code for external file
randomInteger(size) {
return Math.floor (size+1*Math.random();
}

*/

/* I know I have to write to the document and I'm going to write
document.write(img src= 'imgNumber.jpg' alt=' ' />
my test images are going to be 0.jpg - 9.jpg
*/

// my function name is showImg()

I'm getting stuck on the setup.

</head>

<body>

<div id="links">
<span>Quick Links</span>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

<div id="main">
<h2>Test Records</h2>
<p>To view the test records, enter your username and password.</p>

<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Username</th>
<td><input size="20" /></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" size="20" /></td>
</tr>
<tr>
<td>As a final security check, enter the 5 numbers
you see displayed below.</td>
<td><input size="6" /></td>
</tr>
<tr>
<td colspan="2" class="center">
<input type="button" value="View Test Records" />
</td>
</tr>
<tr>
<td colspan="2" class="center">
</td>
</tr>
</table>
</div>

</body>
</html>

itsallkizza

05-27-2009, 05:09 PM

Name your number images 1.jpg through 10.jpg and use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
// <![CDATA[

function randomInteger(min,max)
{
return min+Math.round(Math.random()*(max-min));
}

function showRandomNumber()
{
var num = randomInteger(1,10); //get random number between 1 and 10 (inclusive)
var nums = (num+"").split("");
var img_html = "";
for (var i=0;i<nums.length;i++) img_html += '<img src="'+nums[i]+'.jpg" alt="'+nums[i]+'" />';
document.getElementById("numbers").innerHTML = img_html;
}

window.onload = function()
{
showRandomNumber();
}

// ]]>
</script>
</head>
<body>

<div id="numbers"></div>

</body>
</html>

Philip M

05-27-2009, 05:25 PM

return min+Math.round(Math.random()*(max-min));

Math.round does not give an even distribution of numbers.

Should be:-

return min+Math.floor(Math.random()*(max-min));

itsallkizza

05-27-2009, 05:40 PM

But then it's not inclusive. That is, if you use floor it doesn't include max (so max isn't actually the max) and if you use ceil then it doesn't include min. round will be evenly distributed for all numbers except the min and max numbers themselves (which will appear 50% less often than the others). If he's picky about completely random and even distribution, something like this would be best:

function randomInteger(min,max)
{
return min+Math.floor(Math.random()*((max+0.999)-min));
}

Or even more accurate (but an extra line of code):

function randomInteger(min,max)
{
var r = min+Math.floor(Math.random()*((max+1)-min))
return r > max ? max-1 : r;
}