while-loop

[Mimi Sini]

hey everyone, can anyone help me with a while loop assignment i'm trying to figure out, i just started this class and i'm so lost,

1.I have to write a script with a while-loop using font and size to display 7 hello's - smallest size down to largest
2.I have to write a script with a while-loop displaying using the rgb function to desplay 10 Hello's same size but going from red to green.

I am so lost! Please help someone.. thanks!!
[ October 17, 2008: Message edited by: Bear Bibeault ]

[Bear Bibeault]

What have you got so far? We won't write code for you but will readily help you with yours.

[Mimi Sini]

thanks for your response this is what i have for the first one..
var i=0;
while (i<=6)
{
document.write("Hello");
document.write("<br />");
i=i+1;
}

and then i was told to do this, but i still don't understand how. where to input
a. Write a small html document with no script to display Hello with a font size being 7. That is:

<font size=7>Hello</font><br>

b. Put this line into a loop and display 7 Hello with the same font size (i.e. 7)

c. Now you have a control variable say i But goes from one to seven.
What you need is replacing the number 7 by i.

[ October 17, 2008: Message edited by: Mimi Sini ]
[ October 17, 2008: Message edited by: Mimi Sini ]

[Mark Vedder]

Hello Mimi,

Welcome to JavaRanch. As a small housekeeping note... when posting code, it is much easier to read if you place it inside UBB [code] [/code] tags. And the easier it is to read the code, the easier it is for people to assist you To learn more about UBB code tags, you can reference this page. The [code] tag is discussed about 3/4 down the page.

You can fix the above post by clicking the edit button , highlighting the code, then clicking the "code' button below the editing window. Then click the "Edit Post" button to submit the change.

Now to answer your question... or at least guide you in the right direction since figuring things out is the best way to learn.

As you show in your post, you know you can do this:

<font size=7>Hello</font><br>

And you know you can use the JavaScript document.write method to output the html. You have that in your code:

document.write("Hello");

Let's take that little snippet a little further by outputting the full html including the font tag. That would give you this:

   
    var i=0;
    while (i<=6)
    {
        document.write("<font size=7>Hello</font>");
        document.write("<br />");
        i=i+1;
    }

Now, in the JavaScript, we can output any variables we have. For example,

<script type="text/javascript" >
    var name="JavaRanch";
    document.write("Welcome to " + name + "!");
</script>

Take a look at what I did in that last bit of code. How could you do something similar to solve your problem?

[Mimi Sini]

<script type="text/javascript">
var name="Hello";
document.write("+Hello+");
while (varname<=6)
{
document.write("<font size=7>Hello</font>");
document.write("br />");
varname=varname+1
}
</script>

I understand how to output any variables, I'm just not understanding how to write this code.

[Mark Vedder]

Let's take a look at your earlier post:

Originally posted by Mimi Sini:
thanks for your response this is what i have for the first one..

var i=0;
while (i<=6)
{
    document.write("Hello");
    document.write("<br />");
    i=i+1;
}

and then i was told to do this, but i still don't understand how. where to input

a. Write a small html document with no script to display Hello with a font size being 7. That is:

<font size=7>Hello</font><br>

b. Put this line into a loop and display 7 Hello with the same font size (i.e. 7)

c. Now you have a control variable say i But goes from one to seven.
What you need is replacing the number 7 by i.

Next, let's look at the code from your last post:

<script type="text/javascript">
    document.write("+Hello+");
    while (varname<=6)
    {
        document.write("<font size=7>Hello</font>");
        document.write("br />");
        varname=varname+1
     }
</script>

Let's clean that up a little by combining it with what you had in the first post of using 'i' as the index variable rather than 'varname'. Plus we need to include the variable declaration like you had above. That would give you this:

<script type="text/javascript" >
    var i=0;
    while (i<=6)
    {
        document.write("<font size=7>Hello</font>");
        document.write("<br />");
        i=i+1;
    }
</script>

If you look at that code, that's the same code from my previous post. When run, that will print out Hello, all in the same font size of 7:
<font size=7>Hello</font>
<font size=7>Hello</font>
<font size=7>Hello</font>
<font size=7>Hello</font>
etc...


So that means you have part a and part b taken care of. All you need to do is part c. Take a look again at what your instructions say for part c, with some emphasis added:

c. Now you have a control variable say i. It goes from one to seven.
What you need to do is replace the number 7 with i.

You want to get it to print Hello in an increasing font size. So you ultimately want it to print:

<font size=1>Hello</font>
<font size=2>Hello</font>
<font size=3>Hello</font>
<font size=4>Hello</font>
etc...

The only difference in those lines is the value of the size... and if you look the loop above, you have a variable, 'i', that each time through the loop is 1 larger than the last time. That's exactly what you want to do with the value of 'size'. And you mentioned you know how to output a variable. So you have all the pieces to the puzzle:
1) you need to have a number in some output increase by 1 each time
2) you have a variable that increases by 1 each time
3) you know how to output that variable
4) I showed you in my first post how to combine a variable with other "hard coded" output

Give it some thought and you should see how the pieces go together. I (or someone else) could just give you the answer; but that's not our way here at JavaRanch because we know people learn better and retain the information when they figure things out.

Let us know how you do. If you still have trouble, let us know what you have tried and we can help further.

[Mimi Sini]

thanks so much mark, i'm going to try this out and let you know, hopefully i can get it this time!

[Mimi Sini]

This is what I got, please let me know if this is correct.

   
<script type="text/javascript">
 
var i=0;
while (i<=6)
{
document.write("<font size=7>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=6>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=5>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=4>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=3>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=2>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=1>Hello</font>");
document.write("<br />");
i=i+1
}
 
   
</script>

[Mimi Sini]

I'm having a hard time with the second part as well, if someone can please help.. this is what I'm getting but it's not right I know..

2. I have to write a script with a while-loop using the rgb function to display 10 Hello's same size but going from red to green.

  
 <script type="text/javascript">
 
var i=250;
var x=0
var n=0
while (i,x,n<=9)
{
document.write("<h1 style=color:rgb(250,0,0)>Hello<br></h1>");
document.write("<br />");
i=i+1;
document.write("<h1 style=color:rgb(250,0,0)>Hello<br></h1>");
document.write("<br />");
x=x+1;
document.write("<h1 style=color:rgb(250,0,0)>Hello<br></h1>");
document.write("<br />");
n=n+n+1;
}
 
   
</script>
 

[Mark Vedder]

Originally posted by Mimi Sini:
This is what I got, please let me know if this is correct.

   
<script type="text/javascript">
 
var i=0;
while (i<=6)
{
document.write("<font size=7>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=6>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=5>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=4>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=3>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=2>Hello</font>");
document.write("<br />");
i=i+1
document.write("<font size=1>Hello</font>");
document.write("<br />");
i=i+1
}
 
   
</script>

I'm afraid you are a little off target here. Generally when coding, any time you find yourself writing a line of code over and over -- or a very similar line of code over and over -- there is a better way of doing things. That is certainly the case here. What would happen if instead of displaying a font size up to 7 you need to display a size up to 100? Or 1,000? Or a million? I don't think you'd want to have to type that. And what happens if we don't know ahead of time what the maximum font size will be? So there has to be a better way to do this.

Also, with the way this code works, the while loop only runs once. As it finishes the first time trough, i = 7, so the while i < 6 test fails, and the loop exits. So we really do not have a loop at all since it only runs once.

Let me try providing another hint for you. Here's some code that simply prints out the value for i in the loop:

<script type="text/javascript" >
    var i=0;
    while (i<=6)
    {
        document.write("The value of i is now " + i + ".");
        document.write("<br />");
        i=i+1;
    }
</script>
 

Enter that code and display the page. Notice how each line is very similar. Now go back to my previous post where I show the desired output where each line is the same with the exception of the font size. Notice any similarities in the output?

I'll give you another hint... If you look at the last code snippet in my last post (before this one), you can modify that code, without adding any additional lines of code, to get the desired results. It's that close to doing what you need.

Originally posted by Mimi Sini:
I'm having a hard time with the second part as well, if someone can please help.. this is what I'm getting but it's not right I know..

2. I have to write a script with a while-loop using the rgb function to display 10 Hello's same size but going from red to green.

  
 <script type="text/javascript">
 
var i=250;
var x=0
var n=0
while (i,x,n<=9)
{
document.write("<h1 style=color:rgb(250,0,0)>Hello<br></h1>");
document.write("<br />");
i=i+1;
document.write("<h1 style=color:rgb(250,0,0)>Hello<br></h1>");
document.write("<br />");
x=x+1;
document.write("<h1 style=color:rgb(250,0,0)>Hello<br></h1>");
document.write("<br />");
n=n+n+1;
}
 
   
</script>

I think once you get the first one, it will help you a lot with this second one since what you need to do is very similar. So I'll hold off on giving any hints at this point.

I've been away from my computer a lot this weekend. But I will be near it from the remainder of tonight and all day tomorrow. So I will keep an eye on this thread for you.

Keep at it.

[Mimi Sini]

Hi Mark, I apologize, thank you for all your help, I'm just really not understanding it. Would you please be able to provide the answer? I hate to even ask, I've just really given up. I'm sure once I see it, I'll get it.

[Mark Vedder]

Hi Mimi,

It just would not be ethical for me to give you the answer; and it wouldn't help you to learn. Please don't give up. Just think how great you'll feel once you figure this out.

Let me try to provide you some more help.


Ultimately you want this to get printed:
Desired Output
<font size=1>Hello</font>
<br />
<font size=2>Hello</font>
<br />
<font size=3>Hello</font>
<br />
<font size=4>Hello</font>
<br />
<font size=5>Hello</font>
<br />
<font size=6>Hello</font>
<br />
<font size=7>Hello</font>
<br />


I showed you an example that prints this:
Example Output
The value of i is now 0.
<br />
The value of i is now 1.
<br />
The value of i is now 2.
<br />
The value of i is now 3.
<br />
The value of i is now 4.
<br />
The value of i is now 5.
<br>
The value of i is now 6.
<br />

If you look at those two outputs (the desired output and my example), you will see the output is similar in that
1) both are lines of text that contain a number that increments
2) there is some text before the number; that text is the same from line to line
3) there is some text after the number (even if the text after the number is merely a period). that text is the same from line to line

The difference between the two outputs is
1) what that text is before the number
2) what the text is that is after the number

That's the only difference! What the text is before and after the incrementing number.

In the event that that doesn't help, here is another way to look at it... As I mentioned earlier, you had some code that would print this:
<font size=7>Hello</font>
<br>
<font size=7>Hello</font>
<br>
<font size=7>Hello</font>
<br>
<font size=7>Hello</font>
<br>
<font size=7>Hello</font>
<br>
<font size=7>Hello</font>
<br>
<font size=7>Hello</font>
<br>

The only problem with that output is that the 7 does not increment. So what do you need to do to make that 7 increment in the output? Again, above it shows an example of text output with a number incrementing in the output. It is simply different text before and after the number. So you just need to have the number increment in your output. In other words, as your instructions c says "What you need to do is replace the number 7 with i" (or rather the value of i).

If those hints fail, carefully read through the above posts again. The answer is there. Keep at it. You will get it.

I hope that helps.

[Mimi Sini]

I finally got Ex.9 - Thank you for your help!

    
<script type="text/javascript">
 
var i=0;
while (i<=6)
{
document.write("<font size="+i+">Hello</font>");
document.write("<br />");
i=i+1
}
 
</script>

Although now I am having a hard time with Ex. 10 - I don't know how to chance the colors to go from red to green - this my code:

  
 
<script type="text/javascript">
 
var i=250;
var x=0;
var n=0;
while (i,x,n<=9)
{
document.write("<h1 style=color:rgb("+i+","+x+","+n+")>Hello<br></h1>");
i=i+1;
x=x-1;
n=n+1;
 
}
 
   
</script>
 

[Mimi Sini]

Ex. 10 - I can't get the colors going from red to green, but i've done red - yellow..

 
<script type="text/javascript">
 
var i=250;
var x=0;
var n=0;
while (i,x,n<=9)
{
 document.write("<h1 style=color:rgb("+i+","+x+","+n+")>Hello<br></h1>");
 i=i+i+i+i+i+1;
 x=n+n+n+n+n+n+n+n+n+n+x+1;
 n=n+1;
}
 
</script>
 
  

[Muhammad Saifuddin]

A little changes.

  var i=250;
var x=50;
var n=0;
while (i,x,n<=11)  

[Mimi Sini]

I tried that, it goes from red to yellow,

 
<script type="text/javascript">
 
var i=250;
var x=50;
var n=0;
while (i,x,n<10)
{
 document.write("<h1 style=color:rgb("+i+","+x+","+n+")>Hello<br></h1>");
 i=i+i+i+1
 x=x+n+n+n+n+n+n+n+n+1
 n=n+1;
}
 
</script>
   

[Muhammad Saifuddin]

But on my machine this code gives me the green after yellow..

[Mark Vedder]

A couple of hints for you:

1) you don't have to count up by 1
2) your while loop condition does not always have to count the number of times you loop. It can test that a certain condition is always true.
3) you can subtract as well as add
4) try to use meaningful variable names. What is i, x and n? They don;t have meaning to the problem at hand.

Take a look at this sample and see if you can extract from it what you need to do:

<script type="text/javascript" >
    var increment = 25; 
    var r=250;
    var g=0;
    while (g <= 250)
    {
        document.write("The value of r is " + r + " and the value of g is " + g);
        document.write("<br />");
        r = r - increment ;
        g = g + increment;
    }
</script>

I don't necessarily need the 'increment' variable. I could have said

r = r - 25;
g =g + 25;

But using the increment variable allows me to change it more easily in one place.

See what you can do with that.
[ October 22, 2008: Message edited by: Mark Vedder ]