Need help understanding (fairly basic) chunk of code!

Nougati · 11-06-2012, 04:32 AM

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.

devnull69 · 11-06-2012, 07:33 AM

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).

Philip M · 11-06-2012, 07:40 AM

Quote:

Originally Posted by devnull69

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

xelawho · 11-06-2012, 03:15 PM

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>