bigPiner Posted July 28, 2013 Share Posted July 28, 2013 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 comment Share on other sites More sharing options...
jeffman Posted July 28, 2013 Share Posted July 28, 2013 (edited) 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 July 28, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
davej Posted July 29, 2013 Share Posted July 29, 2013 (edited) 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 July 29, 2013 by davej Link to comment Share on other sites More sharing options...
jeffman Posted July 29, 2013 Share Posted July 29, 2013 Dave is 100% correct. Suggested reading. Link to comment Share on other sites More sharing options...
bigPiner Posted July 29, 2013 Author Share Posted July 29, 2013 That makes sense and it explains the different results I get with my modifications. I appreciate the need to stay away from document.write--very dangerous. Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now