Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need help understanding (fairly basic) chunk of code!

    Hey guys,
    This is my first time on this website ever, so I have no idea how many people come through here, nor do I know how useful this post will be for me, but bare with me.
    Anyway, the topic:
    Without going to far into the redundancies, in my high school IT class, my teacher is a bit... slow. Henceforth I am usually having to accept some parts of my understanding as simply inexistent. This is an example.
    We started Javascript and began with box sort algorithms (input fields that would sort the values in to an order). However my troubles began when I made it to 10 box sort, and considering my teacher hadn't "come up with the answer yet", troubleshooting my code was virtually bashing my head against a wall.
    So I got one of my mates from another class to send me his code so I could compare. One thing I noticed is that his code is more comprehensive and has functions that i can only assume his teacher taught him.
    So if someone could walk me through the process of the program, from the button press to the outcome of the boxes, that would be incredible.
    I have basic knowledge of all the functions of the loops, but still not extensively.
    Code:
    <html>
    <head>
    <title>Bubble Sorting</title>
    <script type = "text/javascript">
    function arraySort()
    {
     var count;
     var myNums=new Array();
     var temp;
     var B1
     var Max =10;
     var swapped=true;
     for(count=1; count<=Max;count++)
     {
      myNums[count]=parseInt(document.getElementById('box'+count).value);
     }
     while (swapped)
     {
      swapped=false;
      for (B1=1;B1<=(Max-1);B1++) 
       {
        if(myNums[B1]>myNums[B1+1])
         {
         temp=myNums[B1];
         myNums[B1]=myNums[B1+1];
         myNums[B1+1]=temp;
         swapped=true;
         }
       }
     }
     for(count=1; count<=Max;count++)
     {
      document.getElementById('box'+count).value=myNums[count];
     }
    alert("Sorted");
    }
    </script>
    </head>
    <body>
    <input id = "box1" type = "text" name = "box1" value = "7" /><br>
    <input id = "box2" type = "text" name = "box2" value = "1" /><br>
    <input id = "box3" type = "text" name = "box3" value = "3" /><br>
    <input id = "box4" type = "text" name = "box4" value = "3" /><br>
    <input id = "box5" type = "text" name = "box5" value = "7" /><br>
    <input id = "box6" type = "text" name = "box6" value = "1" /><br>
    <input id = "box7" type = "text" name = "box7" value = "3" /><br>
    <input id = "box8" type = "text" name = "box8" value = "3" /><br>
    <input id = "box9" type = "text" name = "box9" value = "7" /><br>
    <input id = "box10" type = "text" name = "box10" value = "1" /><br>
    <input id = "sortButton" type = "button" name = "sprt" value = "Sort" onclick = 
    
    "arraySort()" />
    </body>
    </html>
    Main things I don't understand is:
    Code:
    var swapped=true
    ...
      swapped=false;
      for (B1=1;B1<=(Max-1);B1++) 
       {
        if(myNums[B1]>myNums[B1+1])
         {
         temp=myNums[B1];
         myNums[B1]=myNums[B1+1];
         myNums[B1+1]=temp;
         swapped=true;
         }
    and
    Code:
    var count;
    ... 
    for(count=1; count<=Max;count++)
     {
      myNums[count]=parseInt(document.getElementById('box'+count).value);
     }
    Any help whatsoever would be amazing.
    Thanks.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    The first code part describes the swapping of two variable values. In order to swap two variable values you need a third (temporary) variable storing one of the values before you overwrite it with the other, because as soon as you copy one variable to the other, both variables will have the same value and the other one would be lost.

    The second code part is a simple for loop counting from 1 to Max (in the variable count). Then it puts the values/content of the boxes with id "box1", "box2" .... "box<MAX>" into the array myNums. parseInt makes sure that the content will be converted into a numeric value (if possible, otherwise it will be NaN).
    Last edited by devnull69; 11-06-2012 at 07:56 AM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by devnull69 View Post
    parseInt makes sure that the content will be converted into a numeric value (if possible, otherwise it will be NaN).
    If you use parseInt() you should also specify the radix (10).

    Better to use Number() to convert a string value to a number. You can trap NaN with

    myNums[count]=Number(document.getElementById('box'+count).value) || 0; // set value to 0 if NaN
    Last edited by Philip M; 11-06-2012 at 07:42 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    This may be getting ahead of where you are, but if your teacher is useless you may as well start learning for yourself: you can make your code more dynamic by simply specifying which group of inputs you want to get the values from. In the code below this is done by putting them all into a div and then collecting them by tag name. Note that this also does away with the need for giving your inputs id's or names.

    The other thing that may be of interest is that javascript has an inbuilt sort method for arrays, so all you really need to do is collect the values from the boxes, push them onto an array, sort the array and then repopulate the boxes with the newly sorted array values. Have a look:

    Code:
    <html>
    <head>
    <title>Bubble Sorting</title>
    </head>
    <body>
    <div id="inps">
    <input type = "text" value = "7" /><br>
    <input type = "text" value = "1" /><br>
    <input type = "text" value = "3" /><br>
    <input type = "text" value = "3" /><br>
    <input type = "text" value = "7" /><br>
    <input type = "text" value = "1" /><br>
    <input type = "text" value = "3" /><br>
    <input type = "text" value = "3" /><br>
    <input type = "text" value = "7" /><br>
    <input type = "text" value = "1" /><br>
    </div>
    <input id ="sortButton" type ="button" name ="sprt" value ="Sort" onclick ="arraySort()" />
    <script type = "text/javascript">
    function arraySort() {
    var tmp=[];
    var boxes=document.getElementById("inps").getElementsByTagName("input");
    for (j = 0; j < boxes.length; j++) {
    tmp.push(boxes[j].value);
    	}
    tmp.sort(function(a,b){return a - b}) 
    for (x = 0; x < boxes.length; x++) {
    boxes[x].value=tmp[x];
    	}
    alert("Sorted");
    }
    </script>
    
    </body>
    </html>
    Last edited by xelawho; 11-06-2012 at 04:03 PM. Reason: added info


  •  

    Posting Permissions

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