Jump to content

Question about for loop in tutorial


Recommended Posts

Hello, I am trying to learn javascript using the W3Schools tutorial. I have come across a lesson on for loops that I do not understand. Can someone point me to a place to get an explanation or maybe explain this to me. I want to understand so I can write the code, not just copy and paste someone else's.

 

If this is not the appropriate place to post questions regarding the tutorial, I apologize in advance, please point me in the right direction.

 

Here is the example given in the tutorial:

First:

<!DOCTYPE html><html><body>

<p>Click the button to loop through a block of code five times.</p><button onclick="myFunction()">Try it</button><p id="demo"></p>

<script>function myFunction(){x="";for (var i=0;i<5;i++) { x=x + "The number is " + i + "<br>"; }document.write(x);}</script>

</body></html>

 

Second:

<!DOCTYPE html><html><body>

<script>cars=["BMW","Volvo","Saab","Ford"];for (var i=0;i<cars.length;i++){document.write("My car is a " + cars + "<br>");}</script>

</body></html>

 

So my question revolves around the string variable x in the first example. Why is this needed? it is not required when iterating through the cars array in the second example. If I remove the x in the x=x + .... code the function outputs 4--the last number in the condition.

 

if I substitute [document.write(i + "<br />");] or [document.write(x + i + "<br />");] for the x=x + ..bit of code to execute, the output is 0 in either case.

 

If I change the x=""; to x="something"; then that (something) appears at the very beginning of the first line of output but does not repeat at the beginning of each line up to 4 as I would expect.

 

Help, what am I missing?

 

Thank you,

bigPiner.

Link to post
Share on other sites

Notice that document.write() comes after the for-loop in the first example, but inside the loop in the cars example. So in the cars example, a string is output every time the loop iterates. In the first example, x is a string that gets longer with each iteration (we call this concatenating), and its value is not written until the string is completely concatenated. x is needed in this case as a place to store the string as it gets longer each time.

 

Strictly speaking, concatenating a string and outputting it just once is slightly more efficient than outputting a series of strings, and in some cases (long explanation) it's the only way to output a string without creating a lot of trouble.

Edited by Deirdre's Dad
Link to post
Share on other sites

One good exercise is to rewrite those examples to get rid of document.write. The tutorial is full of uses of document.write but really it is normally avoided.

<!DOCTYPE html><html><head><title>title</title></head><body><p>Click the button to loop through a block of code five times.</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction(){var str = "";for (var i=0 ; i<5 ; i++)  {  str = str + "The number is " + i + "<br/>";  }document.getElementById('demo').innerHTML = str;}</script></body></html>
Edited by davej
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...