www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need JS help! (Newbie here)

  1. #1
    Join Date
    Nov 2013
    Posts
    4

    Question Need JS help! (Newbie here)

    Hi guys, I just started learning JavaScript not too long ago. I'm a newbie taking an online class, but I'm stuck on a question for an assignment. If anyone could give me some tips or pointers (not necessarily the actual answer), that would be great. Thanks!

    Question:
    Describe what the following program does:

    var width = 10;
    var height = 10;
    var maxWidth = 100;
    var maxHeight = 150;
    var color = "blue";
    for (var i = 0; i < 10; i++) {
    width = width + 10;
    height = height + 15;
    if (i >= 5) {
    color = "red";
    }
    }

    I'm still a beginner at JS, and I just recently learned about "for" and "while" loops. I guess this question is basically asking what would happen once this script is executed. I tried to embed this in <script> tags within a HTML file to test it out and got nothing. I suppose I need to maybe place the code in a function and call it out so the script would run. But I tried doing that and nothing happened. Am I missing something? What would I need to do because I'm confused.

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    That routine does not output anything, it just increments variables as shown.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Nov 2013
    Posts
    4
    Thanks for the reply. While I do understand that it's supposed to generate variable increments of a rectangle with an integer counter, I'm more so wondering if there's a way to see it in action within a browser. This script doesn't currently have any lines of code for the output, so what would I need to do to execute this script with what's given so far?

  4. #4
    Join Date
    Nov 2013
    Posts
    4
    Alright, I just got my answer from some friends so I think I understand now. It turns out that there is no output in this particular case as it is a hypothetical situation in which this script is strictly a function. The goal of this question is that I understand the point of the script itself, which I do now.

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    	<title> Untitled </title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		div {
    			width: 50px;
    			height: 50px;
    			max-height: 150px;
    			max-width: 150px;
    			border: 1px solid black;
    			background-color: red;
    		}
    	</style>
    	<script>
    		function changeStyle() {
    			var height = 10, width = 10, i, elem;
    			
    			for (i = 0; i < 10; i++) {
    				elem = document.getElementById('d'+i);
    				width += 10; //increases the width for 10 width every loop iteration
    				height += 10; //increases the height for 10 width every loop iteretion
    				
    				if ((width >= 150) || (height >= 150)) {
    					alert("Exiting for loop, max size of the element reached!!");
    					break;
    				}
    				if (i > 5) elem.style.backgroundColor = "blue";
    				
    				elem.style.width = width + "px";
    				elem.style.height = height + "px";
    			}
    			return;
    		}
    	</script>
    </head>
    <body>
    	<div id="d0"></div>
    	<div id="d1"></div>
    	<div id="d2"></div>
    	<div id="d3"></div>
    	<div id="d4"></div>
    	<div id="d5"></div>
    	<div id="d6"></div>
    	<div id="d7"></div>
    	<div id="d8"></div>
    	<div id="d9"></div>
    	<input type="button" value="Change div" onclick="changeStyle()" />
    </body>
    </html>
    Last edited by tech_soul8; 11-13-2013 at 01:27 AM.

  6. #6
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Quote Originally Posted by YongShi View Post
    Alright, I just got my answer from some friends so I think I understand now. It turns out that there is no output in this particular case as it is a hypothetical situation in which this script is strictly a function. The goal of this question is that I understand the point of the script itself, which I do now.
    The script is not a function. It simply sets up some variables and initialize them to hold some values. Then the for loop gets executed and with each iteration the value of with gets incremented for 10 and the value of height for 15 respectively. If the loop counter variable is greater then 5 or equals to 5, color is changed too.

    This code should be applied to some html element so I have gave you a simple example in the code above...
    Last edited by tech_soul8; 11-13-2013 at 01:28 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles