New Perspectives on Javascript: Tutorial 2, Case 2

**gits** · Nov 8 '08, 05:52 PM

what have you done so far? how does the mentioned functions look like?

kind regards

**mshepard** · Nov 9 '08, 02:06 PM

I am working in <div id="ads"> section.

[HTML]<html>
<head>

<title>The Ridgewood Herald Tribune</title>
<link href="styles.cs s" rel="stylesheet " type="text/css" />
<script type="text/javascript" src="random.js" ></script>
<script type="text/javascript" src="ads.js"></script>
<script type="text/javascript">
</script>

</head>

<body>

<div id="links">
<h1>Contents</h1>
<p class="section" >Main</p>
<p class="linksub" >
<a href="#">Home</a><br />
<a href="#">Subscr iptions</a><br />
<a href="#">Contac t Us</a><br />
<a href="#">News Sources</a><br /><br />
</p>
<p class="section" >News</p>
<p class="linksub" >
<a href="#">Local</a><br />
<a href="#">Nation al</a><br />
<a href="#">Intern ational</a><br />
</p>

<p class="section" >Sports</p>
<p class="linksub" >
<a href="#">Baseba ll</a><br />
<a href="#">Basket ball</a><br />
<a href="#">Footba ll</a><br />
<a href="#">Golf</a><br />
<a href="#">Hockey </a><br />
<a href="#">Miscel laneous</a><br />
</p>

<p class="section" >Opinion</p>
<p class="linksub" >
<a href="#">Editor ials</a><br />
<a href="#">Column ists</a><br />
<a href="#">Letter s</a><br />
</p>

<p class="section" >Classifieds</p>
<p class="linksub" >
<a href="#">Employ ment</a><br />
<a href="#">For Sale</a><br />
<a href="#">Person als</a><br />
<a href="#">Real Estate</a><br />
<a href="#">Wanted </a><br />
</p>

<p class="section" >Other</p>
<p class="linksub" >
<a href="#">Busine ss</a><br />
<a href="#">Weathe r</a><br />
<a href="#">Entert ainment</a>
</p>
</div>
<div id="main">
<div id="ads">
<script type="text/javascript">
var rNumber = randInt();
var rAd = adDescription() ;
var rLink = adLink();
document.write( <a href="URL">);
document.write( '<img src="adn.jpg" alt="descriptio n">');
document.write</a>
</script>
</div>

<div id="request">< a href="#">Contac t us today to place your ad</a></div>

<p id="logo">
<img src="logo.jpg" alt="Ridgewood Herald Tribune" />
</p>

<p id="fp">
<img src="fp.jpg" alt="" />
</p>

<h2>Park Opens</h2>
<p id="intro">The <i>Adventure Island</i> theme park opened its doors on
Monday near Ridgewood. The park, one of the biggest in the Midwest, drew
large crowds, but the long lines didn't deter anyone. "I've been watching
them put up the rides over the last year, it's really exciting to finally
get inside the gates!" said Ridgewood resident, Denise Brooks.</p>

<p class="cont"><a href="#">story continues on page 2...</a></p>

<address id="footer">
<b>Ridgewood Herald Tribune</b>  °&nbsp ; 10010 Atwood Ave.
 °&nbsp ; Ridgewood, Iowa     80135<br />
Phone: (606)555-1101  °&nbsp ; Fax: (606)555-1102
</address>
</div>

</body>
</html>
[/HTML]
THis is an external js.

New Perspectives on JavaScript
Tutorial 3
Case Problem 2

Function List:
randInt
Used to return a random integer from 1 to 'n'

*/

Code:

function randInt(n) {
   randNum = Math.ceil(Math.random()*n);
   return randNum;
}

THis is the other js.

Code:

function adDescription(n) {
   var descrip = new Array();
   descrip[1]="[AD] Diamond Health Club - For all your Health Club Needs";
   descrip[2]="[AD] Pixal - Quality Digital Equipment and Accessories";
   descrip[3]="[AD] dHome - Quality Geodesic Domes and Homes";
   descrip[4]="[AD] Dunston Retreat Center - get away";
   descrip[5]="[AD] LanGear - Quality Network Solutions for all your Business Needs";

   return descrip[n];
}

function adLink(n) {
   var link = new Array();
   link[1]="http://www.diamondhealth.com";
   link[2]="http://www.pixalproducts.com";
   link[3]="http://www.dhome.com";
   link[4]="http://www.dunstonretreats.com";
   link[5]="http://wwww.langearproducts.com";

   return link[n];
}

**gits** · Nov 9 '08, 02:48 PM

basicly your calls there should look like the following:

[CODE=javascript]var rNumber = randInt(5);
var rAd = adDescription(r Number);
var rLink = adLink(rNumber) ;

alert('<a href="' + rLink + '">' + rAd + '</a>');
[/CODE]
before using the functions you should have a close look at it and see what parameters you need to pass and what the functions return.

kind regards

**mshepard** · Nov 10 '08, 08:34 PM

Perspectives on Javascript

Code:

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 4
   Case Problem 2

   The Home Center
   Author: Michael 	
   Date:   11/10/2008

   Filename:         home.htm
   Supporting files: logo.jpg, random.js, styles.css, tips.js, work.jpg
  
IN THIS FILE SCROLL DOWN TO THE <div> ELEMENT WITH AN ID VALUE OF "tip"
REPLACE THE CONTENTS OF THIS ELEMENT WITH AN EMBEDDED SCRIPT ELEMENT.
WITHIN THE SCRIPT ELEMENT DO THE FOLLOWING: A). DECLARE A VARIABLE NAMED tipNum = TO A RANDOM INTEGER 
BETWEEN 1 AND 10 RETURNED BY THE randInt() FUNCTION CREATED IN THE random.js file.
ALSO, USE A SERIES OF document.write() methods TO WRITE THE FOLLOWING html CODE TO THE WEB PAGE:
<h1>Random Tip<br> />title</h1>
<p>tip</p>
Where title is the title of the random title as generated by the tipTitle() function and
tip is the text of the random tip as generated by the tipText() function.   
   
-->
<title>The Home Center</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tips.js"></script>
<script type="text/javascript" src="random.js"></script>
</head>

<body>

<div id="searchbox">
   Search <input size="20" />
</div>

<div id="links">
  <img src="logo.jpg" alt="the Home Center" />
  <ul>
     <li><a href="#">Home</a></li>
     <li class="new"><a href="#">What's New</a></li>
     <li><a href="#">Home Projects</a></li>
     <li><a href="#">E-Newsletter</a></li>
     <li><a href="#">FAQ</a></li>
     <li class="new"><a href="#">Online Store</a></li>
     <li><a href="#">Product Search</a></li>
     <li class="new"><a href="#">Forums</a></li>
     <li><a href="#">Our Partners</a></li>
     <li><a href="#">Contact Us!</a></li>
     <li><a href="#">About the Home Center</a></li>
   </ul>
</div>

<div id="main">
   <div id="tip">
   
      <h1>Random Tip<br />
      Tip Title
      </h1>
      Place random tip text here in this box.
   </div>

   <p id="firstp"><b>The Home Center</b> is your number one source for do it yourself home 
   improvement help with tutorials and tips on all your home repairs, remodeling, 
   and redecorating. Our goal is to make your projects easy, inexpensive, and 
   rewarding. Nothing matches the satisfaction of a job well done.</p>
   <p>You will find step-by-step instruction and money-saving tips on all your 
   do-it-yourself projects including house painting, wallpaper, carpentry, home 
   insulation, woodworking, electrical, plumbing, air conditioning and heating, 
   flooring, masonry, concrete, wood decks, interior decorating, gardening, 
   how to save energy, reduce your utility bills, and more.</p>
   <p>Be sure to visit our online store for great prices on the tools and 
   materials you need for your home repair projects!</p>

</div>

</body>
</html>

/*
   New Perspectives on JavaScript
   Tutorial 2
   Case Problem 2

   Author: Michael 
   Date:   11/10/2008

   

*/
//create a function named randInt(). The purpose of this function is to generate a random integer within a given range. 
//THe function has two parameters: lower and upper, where lower is the lowest integer in the range
//and upper is the highest in the range.
//Add the following commands to the function
//a.  Declare a variable named size = to the number of integers in the given range.
//(hint: the size of the range is one more that the differnce between the highest and lowest integer.
//b. Use the Math.floor and Math.random methods as well as the lower parameter and size variable to generate a random integer.


function randInt()

var size

/*
   New Perspectives on JavaScript
   Tutorial 2
   Case Problem 2

   Function List:
   tipTitle(n)
      Used to return the title for tip "n"

   tipText(n)
      Used to return the text of tip "n"
*/


function tipTitle(n) {
   var title = new Array();
   title[1] = "Damaged Tiles";   
   title[2] = "Sanding Wood"; 
   title[3] = "Dealing with Ice";
   title[4] = "Weed Killers";
   title[5] = "Effective Mowing";
   title[6] = "Lighting the Outdoors";
   title[7] = "Using a Sump Pump";
   title[8] = "Sagging Gutters";
   title[9] = "Long-lasting Brushes";
   title[10] = "Using Downspouts";
   return title[n];
}

function tipText(n) {
   var text = new Array();
   text[1] = "To replace a tile, blast a hair dryer at full force onto the ragged " +
             "edge of the tile that's chipped. Once it heats up, press a large wood " +
             "chisel into that edge to lift away the tile, then use the chisel or a " +
             "putty knife to remove any remaining adhesive.";
   text[2] = "Before you stain wood, first sand it down to a silky smoothness, using " +
             "successively finer grades of sandpaper. Once it's smoooth, soak a rag " +
             "in turpentine and rub it into the wood. As the turpentine dries, the wood's " +
             "grain will rise. Sand this down with super-fine grit, making sure never to " +
             "sand against the grain. You're now ready to stain.";
   text[3] = "Not sure how to take care of an icy driveway? Rock salt clears the ice, " +
             "but it can kill nearby vegetation and damage the concrete below. Luckily, " +
             "there's now a whole handful of environmentally-friendly products that melt " +
             "the ice without ruining your lawn or sidewalk. You can also go the " +
             "old-fashioned route and spread ash, sand or gravel on the ice to provide " +
             "better traction.";
   text[4] = "To control your weeds you may need " +
             "to use chemical weed killers. Don't spread a weed killer on a newly " +
             "seeded lawn. That may do more harm than good. If you spray weed killer with " +
             "a garden-hose attachment, wait for a calm day with little or no wind to prevent " +
             "it from spreading to adjoining flower patches and harming them. Finally, spray " +
             "between mowings so that the chemical can sink into the weeds.";
   text[5] = "Don't mow your grass when it's wet; that damages the blades and your lawn alike. "+
             "Don't buzz cut an overgrown lawn to get back on schedule. Instead, cut the grass " +
             "back in increments, never by more than a third of its current length. However, do cut " +
             "your lawn as high as about three inches. That length helps limit weed growth, reduces " +
             "the need for watering and promotes a strong root structures. Don't cut your lawn " +
             "obsessively.";
   text[6] = "Use outdoor lights with a photocell unit or a timer so they will turn off during the day. " +
             "Turn off decorative outdoor gas lamps; eight gas lamps burning year round use as much " +
             "natural gas as it takes to heat an average-size home during an entire winter. Finally, " +
             "if you live in a cold climate, be sure to buy a lamp with a cold-weather ballast.";
   text[7] = "Dealing with basement flooding? Get a sump pump if you don't already have one. " +
             "If you do have one, consider a second one for emergency situations. If your sump pump " +
             "is electric, get a battery-operated version as a backup since power outages often " +
             "accompany heavy storms. Be sure to check your pump for problems. First, disconnect " +
             "the pump and clean out any debris; then reconnect it and pour in enough water for a " +
             "test.";
   text[8] = "If your gutters aren't draining quickly and drip long after the rain, water " +
             "may be collecting in a low spot caused by sagging. If that's the case, grab a friend " +
             "and snap a chalk line along the gutter using both ends of its top edge as your guiding " +
             "points. (You should have a slope of 1 inch for every 16 feet of gutter). Look for spots " +
             "where the gutter's edge falls below the chalk line, then refasten the spikes, straps " +
             "or brackets that hold it in place.";
   text[9] = "Excessive soaking is the number one menace to the lifespan of a paintbrush. Instead of " +
             "soaking, clean your brush immediately according to the directions. When using oil base " +
             "paints, clean thoroughly in solvent, kerosene or thinner, then comb and place back in " +
             "the keeper.";
   text[10]= "To effectively get the water away from your house you can let your downspout " +
             "empty onto a splash block or send the runoff to " +
             "an extension gutter. Or you can get a retractable downspout extender which " +
             "unfurls as it fills with water, then contract as the water stops flowing, " +
             "tucking neatly under the downspout and out of the way of lawn mowers.";
   return text[n];
}

**mshepard** · Nov 10 '08, 08:40 PM

I need to generate a new ad everytime the window is reloaded. What am I suppose to do to the section <div id="ads"> to make this work correctly. Please look at what I have there now. Thanks

Originally posted by mshepard

I am working in <div id="ads"> section.
[HTML]<html>
<head>

<title>The Ridgewood Herald Tribune</title>
<link href="styles.cs s" rel="stylesheet " type="text/css" />
<script type="text/javascript" src="random.js" ></script>
<script type="text/javascript" src="ads.js"></script>
<script type="text/javascript">
</script>

</head>

<body>

<div id="links">
<h1>Contents</h1>
<p class="section" >Main</p>
<p class="linksub" >
<a href="#">Home</a><br />
<a href="#">Subscr iptions</a><br />
<a href="#">Contac t Us</a><br />
<a href="#">News Sources</a><br /><br />
</p>
<p class="section" >News</p>
<p class="linksub" >
<a href="#">Local</a><br />
<a href="#">Nation al</a><br />
<a href="#">Intern ational</a><br />
</p>

<p class="section" >Sports</p>
<p class="linksub" >
<a href="#">Baseba ll</a><br />
<a href="#">Basket ball</a><br />
<a href="#">Footba ll</a><br />
<a href="#">Golf</a><br />
<a href="#">Hockey </a><br />
<a href="#">Miscel laneous</a><br />
</p>

<p class="section" >Opinion</p>
<p class="linksub" >
<a href="#">Editor ials</a><br />
<a href="#">Column ists</a><br />
<a href="#">Letter s</a><br />
</p>

<p class="section" >Classifieds</p>
<p class="linksub" >
<a href="#">Employ ment</a><br />
<a href="#">For Sale</a><br />
<a href="#">Person als</a><br />
<a href="#">Real Estate</a><br />
<a href="#">Wanted </a><br />
</p>

<p class="section" >Other</p>
<p class="linksub" >
<a href="#">Busine ss</a><br />
<a href="#">Weathe r</a><br />
<a href="#">Entert ainment</a>
</p>
</div>
<div id="main">
<div id="ads">
var rNumber = randInt(5); //gernerate a random integer from 1 to 5
var rAd = adDescription(r Number); //description of the random ad
var rLink = adLink(rNumber) ; //url of the random ad
document.write( '<a href="+rLink+" "+rAd+">');
document.write( rAd,rLink);
document.write( "</a>") </div>

<div id="request">< a href="#">Contac t us today to place your ad</a></div>

<p id="logo">
<img src="logo.jpg" alt="Ridgewood Herald Tribune" />
</p>

<p id="fp">
<img src="fp.jpg" alt="" />
</p>

<h2>Park Opens</h2>
<p id="intro">The <i>Adventure Island</i> theme park opened its doors on
Monday near Ridgewood. The park, one of the biggest in the Midwest, drew
large crowds, but the long lines didn't deter anyone. "I've been watching
them put up the rides over the last year, it's really exciting to finally
get inside the gates!" said Ridgewood resident, Denise Brooks.</p>

<p class="cont"><a href="#">story continues on page 2...</a></p>

<address id="footer">
<b>Ridgewood Herald Tribune</b>  °&nbsp ; 10010 Atwood Ave.
 °&nbsp ; Ridgewood, Iowa     80135<br />
Phone: (606)555-1101  °&nbsp ; Fax: (606)555-1102
</address>
</div>

</body>
</html>
[/HTML]
THis is an external js.

New Perspectives on JavaScript
Tutorial 3
Case Problem 2

Function List:
randInt
Used to return a random integer from 1 to 'n'

*/

Code:

function randInt(n) {
   randNum = Math.ceil(Math.random()*n);
   return randNum;
}

THis is the other js.

Code:

function adDescription(n) {
   var descrip = new Array();
   descrip[1]="[AD] Diamond Health Club - For all your Health Club Needs";
   descrip[2]="[AD] Pixal - Quality Digital Equipment and Accessories";
   descrip[3]="[AD] dHome - Quality Geodesic Domes and Homes";
   descrip[4]="[AD] Dunston Retreat Center - get away";
   descrip[5]="[AD] LanGear - Quality Network Solutions for all your Business Needs";

   return descrip[n];
}

function adLink(n) {
   var link = new Array();
   link[1]="http://www.diamondhealth.com";
   link[2]="http://www.pixalproducts.com";
   link[3]="http://www.dhome.com";
   link[4]="http://www.dunstonretreats.com";
   link[5]="http://wwww.langearproducts.com";

   return link[n];
}

**gits** · Nov 10 '08, 09:48 PM

lines 81 and 82 seems to be strange ... are the links supposed to work that way? :)

**Dormilich** · Nov 11 '08, 05:36 AM

the quotation marks mess up line 81.

personally, I'd use DOM for that.

**acoder** · Nov 11 '08, 08:28 AM

Never mind that (well, OK, it is important, but not as important as this), what's JavaScript doing in the HTML without being in script tags?!

**acoder** · Nov 11 '08, 08:33 AM

mshepard, please do not double post your questions. I've merged the threads. That second thread had one post with code only and no explanation of what the problem was. It doesn't work like that. You need to show what you've done and the problem you're having getting it to work. Also remember to use code tags when posting code. Thanks.

Moderator.

New Perspectives on Javascript: Tutorial 2, Case 2

New Perspectives on Javascript: Tutorial 2, Case 2

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment