How to build with Javascript code a table that shows the pure colors in all color resolutions. It’s a nesting loop exercise, using three repetitions, one within the other.
Although we talk a lot about colors in this article, you can understand this Javascript workshop as a practice on nested loops and array traversal.
In HTML we build any color by mixing red, green and blue (RGB) in the proportions we want. This is a fact that you should know before reading this article. Color construction is explained in detail in the article. It will be necessary for those who are not familiar with this matter to read the article.
In addition to how to build colors, the article also shows what pure colors are, which look good in all color depths that visitors’ computer settings may have. For the construction of pure colors we always mix RGB colors in these amounts 00, 33, 66, 99, CC, FF. Again, who does not know this should .
The example we intend to build has to do with pure colors in all definitions. It is about building a table in a web page that contains all the pure colors, in addition to the RGB code of each color. This table can be used to select a color that we intend to use on a web page. If we limit ourselves to using only the colors in the table, we will be sure that our palette will be respected in all cases.
To generate all the pure colors we are going to use three Javascript arrays with the possible values for each of the RGB colors. Therefore, we will have three arrays like the ones that can be seen below:
var r = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”); var g = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”); var b = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”);
To write the table on the web page we are going to take a tour of these three arrays. For this we are going to use nested loops, which are loops inside other loops.
We are going to try to explain why we need nested loops; If we count the colors that we must generate, we will obtain a list like the following:
#000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF… Well, we see that at first the three RGB values are worth 00 and how in successive repetitions the value of B (the value assigned to blue) is increased until we reach FF. To continue, the value of G is increased and the count is performed again with B. It is as if we were counting and the units were the values of RBG.
The thing is that we do the count with the value B, when we get to FF we increase the value of G and when we get to FF in G we would increase by a value R. So you can see a structure in pseudocode like this.
The next segment is some simple pseudocode to clarify exactly what our three nested loops will look like.
We count from 00 to FF with the value R{ We count from 00 to FF with the value G{ We count from 00 to FF with the value R{ We print the current value of RGB } } }
This structure prints all the pure colors, and is already close to our solution, although it’s not written in Javascript yet, and it’s missing all the HTML tags we need to display a table on a web page.
Since it doesn’t matter to go a little slower as long as everyone understands the problem Let’s write this loop in Javascript so that it simply lists the pure colors, without entering them into a table yet. It will be interesting to see a little better how nested loops work.
//create the arrays var r = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”); var g = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”); var b = new Array(“00″,”33″,”66″,”99″,”CC”,”FF”); //we make the nested loop for (i=0;i
Loops to traverse an array are created with an index that will be used to access the current position of the array. Indices in arrays start at 0, which is why our for loops contain an initialization to 0 of the variable that will serve as the index. Furthermore, the index must grow one by one until it reaches the last position of the array, which is obtained by accessing its length property (which stores the length or number of elements in the array).
Putting a loop inside another we can make that account. The outermost loop will be the one that is executed the fewest times, so with the outer loop we will keep track of R. The loop in the middle will be to keep track of G and the innermost (the one that will be repeated the most times) will keep track of the account of B, which is the value that is constantly changing.
The complete color table
To finish, we are going to see the complete example, with all the lines of code that include the necessary HTML texts so that the table comes out conveniently formatted and with the background colors in each of the cells equal to the current color.
To do this, the first thing we do is write a table header and table completion, which are outside the loop structure. Within the loops we will carry out the statements to print each of the rows and cells of the table.
Our table is going to have in each row a set of colors where the RG values do not change and the B value varies among all the possible ones. In the next row, the G value would be increased by one and the B values would be counted again… like this until we end up with all the possible R, G and B values.
The code is the following:
We see that before starting the innermost loop, a new cell is created with
The table generated by this script can be seen here:
Facebook Comments
Disqus