Using the Array Object JavaScript 1.5 4-25 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 4: Arrays TIP: Because this lab includes a great deal of typed code, we‟ve tried to make it simpler for you. You will find all the code in JMartSale.html and JMartSale.js, in the same directory as the sample project. To avoid typing the code, you can cut/paste it from the source files instead. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 4: Arrays 4-26 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 4 Overview In this lab you will learn how to parse delimited strings into Arrays and how to properly dump multidimensional arrays into viewable data. To complete this lab, you will need to work through two exercises:  Delimited String to Arrays  Display the Product Each exercise includes an “Objective” section that describes the purpose of the exercise. You are encouraged to try to complete the exercise from the information given in the Objective section. If you require more information to complete the exercise, the Objective section is followed by detailed step-by- step instructions. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Delimited String to Arrays JavaScript 1.5 4-27 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Delimited String to Arrays Objective In this exercise, you will create a function that accepts a comma-delimited string of product categories, an array of delimited strings of products, and a delimiter to split the strings with. The function will return a completed array that will contain an array of arrays that hold the category at index [0] and the products in an array at index [1]. You will also create a quick function to start the array creation. Things to Consider  To access an array that is within an array use the following syntax: mainarray[indexinteger][subarrayindexinteger].  A delimited string is a string of different values separated by some sort of a delimiter, most often a comma: “bob,Ralph,frank,steve”. Programmatically these are easy to convert into arrays, or import into spreadsheets and such.  A three dimensional array is an array packed with arrays that are also packed with arrays. Step-by-Step Instructions 1. To get an idea of how a 3D array might look, examine Figure 5. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 4: Arrays 4-28 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Figure 5. A conceptual 3D array for the Batteries category. 2. Open the JMartSale.html file located in this lab‟s directory. It is basically a simple page with a header, a form, and one button to launch the showArray function. 3. Open the JMartSale.js file. At the top of the document, under the comments, create a variable called categories and define it with a comma delimited string: “Batteries,Soap,Magazines,Tires”. Create an array with four positions, using the statement var aProducts = new Array(4);. Define the products as double-delimited strings; each product is delimited with a comma, and within each comma the product is delimited from its price with a colon. Use the values from Table 1. Array Index Value aProducts[0] “Duracell:10.00,Energizer:11.50,Eveready:7.25,Kodak:18.75” aProducts[1] “Dial:1.50,Dove:.99,Irish Spring:112.14” aProducts[2] “Sports Illustrated:3.95,Mac Addict:5.25,Maxim:9.99,Us Weekly:5.21,Time:5.01” aProducts[3] “Pirelli:120.00,Goodyear:89.32,BF Goodrich:92.52,Firestone (Ford blowout sale):0.00” Table 1. Values for aProducts array. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Delimited String to Arrays JavaScript 1.5 4-29 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. var aProducts = new Array(4); aProducts[0] = "Duracell:10.00,Energizer:11.50, Eveready:7.25,Kodak:18.75"; aProducts[1] = "Dial:1.50,Dove:.99, Irish Spring:112.14"; aProducts[2] = "Sports Illustrated:3.95, Mac Addict:5.25,Maxim:9.99, Us Weekly:5.21,Time:5.01"; aProducts[3] = "Pirelli:120.00,Goodyear:89.32, BF Goodrich:92.52,Firestone (Ford blowout sale!):0.00" 4. Under aProducts, create a new function called createArray() that accepts catlist, products, and delim. The function will expect a comma delimited string, an array of comma/colon delimited strings, and a delimiter (as a string). Create another function below it called showArray(), that takes no parameters. function createArray(catlist, products, delim) { } function showArray() { } 5. In createArray(), you are going to create a 3D array out of the data provided. First, split catlist into an array called cats, using the statement var cats = catlist.split(delim);. Remember string.split(delim) creates an array that contains the divided string elements. Next, define the array that will be returned from this function, using the statement var aresult = new Array();. function createArray(catlist, products, delim) { var cats = catlist.split(delim); var aresult = new Array(); 6. On the next line, create a for loop with the condition (ca = 0; ca < cats.length; ca++), which will iterate once for each category in the cats array. Within the loop, create a temporary array to hold the product elements within that category, using the statment var tmparray = new Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 4: Arrays 4-30 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Array(2);. This array only needs to be a size two because it will hold the category name in the zero index position, and an array of size two that contains the product and price in the second index position. for (ca = 0; ca < cats.length; ca++) { var tmparray = new Array(2); } 7. Next, add the current category in the cats array to the temporary array, using the statement tmparray[0] = cats[ca];. The categories are in the correct order to match up with the products located in aProducts. All you have to do is grab the list of products that match the current iteration of the loop. First, split the products into tmparray[1], using the statement tmparray[1] = products[ca].split(delim);. for (ca = 0; ca < cats.length; ca++) { var tmparray = new Array(2); tmparray[0] = cats[ca]; tmparray[1] = products[ca].split(delim); } 8. Next, sort the products using the sort() method of tmparray[1]. for (ca = 0; ca < cats.length; ca++) { var tmparray = new Array(2); tmparray[0] = cats[ca]; tmparray[1] = products[ca].split(delim); tmparray[1] = tmparray[1].sort(); } 9. Finally, add the tmparray to the aresult array, using the statement aresult[ca] = tmparray;. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Delimited String to Arrays JavaScript 1.5 4-31 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. for (ca = 0; ca < cats.length; ca++) { var tmparray = new Array(2); tmparray[0] = cats[ca]; tmparray[1] = products[ca].split(delim); tmparray[1] = tmparray[1].sort(); aresult[ca] = tmparray; } 10. Now you will create a quick loop to report the size of the aresult array, the size of each of its indices, and within each index, the size of the products array. Create the variable msg to display the results. Start msg by adding “Result array length: ” + aresult.length + “\n\n”;. var msg = "Result array length: " + aresult.length + "\n\n"; 11. Next, create a for loop to add the array information to msg. It needs to iterate through the length of aresult. for (ra = 0; ra < aresult.length; ra ++) { } 12. Output the current index of aresult and the length of the category/product array in aresult‟s current index (should always equal 2). for (ra = 0; ra < aresult.length; ra ++) { msg += "Array at " + ra + "'s length is: " + aresult[ra].length + "\n"; } 13. Next, output the length of the product array located in index[1] of the category/products array. To reference the index of an array within an array, you can use the shortcut syntax format arrayname[parentindex][childindex].methodname. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 4: Arrays 4-32 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. for (ra = 0; ra < aresult.length; ra ++) { msg += "Array at " + ra + "'s length is: " + aresult[ra].length + "\n"; msg += " - Its product array length is: " + aresult[ra][1].length + "\n"; } 14. After the loop, display the msg variable in an alert dialog box, and then return aresult. for (ra = 0; ra < aresult.length; ra ++) { msg += "Array at " + ra + "'s length is: " + aresult[ra].length + "\n"; msg += " - Its product array length is: " + aresult[ra][1].length + "\n"; } alert(msg); return aresult; } 15. In the showArray() function, add the statement var marray = createArray(categories, aProducts, “,”); to execute the createArray() method. function showArray() { var marray = createArray(categories, aProducts, ","); } 16. Test the exercise by launching JMartSale.html in your browser. You should see an alert dialog box with the specifics of the array created from the delimited strings, as shown in Figure 6. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Delimited String to Arrays JavaScript 1.5 4-33 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Figure 6. Array information generated by this exercise. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 4: Arrays 4-34 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Display the Product Objective Learn how to display the data of the 3D array to your users. Commonly you would split the data up into a table where you could see the price and all the details. For this exercise you will create a more complicated version of the alert(msg) from the previous exercise using all the data. Things to Consider  A comma is not the only delimiter you can use. In fact, you can use just about any character. A common delimiter is the pipe character „|‟.  If you had many lists of categories and products, you could use array.join() to add them all together and throw them into the createArray function.  An array is JavaScript‟s most efficient way to keep collections of the data in a page. They are quite handy when a large amount of data is being handed to you from the server side, and are actually compatible with a Java ArrayList. Step-by-Step Instructions 1. Return to the showArray() function. Right below the line where the variable marray is defined, declare the products message, using the statement var msg = “You know the prices are good\nwhen they are J- Prices!\n\n”;. function showArray() { var marray = createArray(categories, aProducts, ","); var msg = "You know the prices are good\nwhen they are J-Prices!\n\n"; } 2. Create a loop to iterate through marray. The value of marray at the current index is another array that will contain the category in its index[0] position and an array of products in its index[1] position. Get the category and add it to the msg string by first accessing marray with the statement marray[ma],and then accessing index[0] of that value: marray[ma][0]. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. [...]... dungdq@edt.com.vn JavaScript 1.5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 4- 3 7 Lab 4: Arrays Figure 8 The Alert results for the J-Mart sale Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 4- 3 8 For product evaluation only– not for distribution or commercial use .JavaScript 1.5. .. object, clear a select object, and alert the selected value(s) of a select object "40 - 50"; agelist [4] = "50 - 60"; agelist[5] = "60 - 70"; //Make sure select object is empty! clearList(slct); //Add our options; addList(agelist,... value="1">10 - 20 20 - 30 30 - 40 40 - 50 To build this out dynamically, you can start with a simple array or build the labels (the text that appears between the option tags) programmatically For the sake of simplicity, the examples use an array Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1.5 For... Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1.5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 5-5 Form Interaction < !-/ /Quick Form Dump var s = ""; for (df = 0; df < document.forms.length; df++) { var f = document.forms[df]; var b = ""; var sp =... conceptual array for the Batteries category in Figure 7 Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1.5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 4- 3 5 Lab 4: Arrays Figure 7 Conceptual array review 6 For the next line, create an output message to describe... dungdq@edt.com.vn 5 -4 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Working with Form Objects Table 3 lists the event handlers that are available for the form object Event Handler Description onReset When the Reset button is clicked in this event handler, JavaScript. .. form‟s action as follows: document.[formname].action = "http://www.url.com/cgiscript"; var actionString = document.formname.action; Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1.5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 5-7 Form Interaction Fieldsets... 5-pixel dotted gray border: < !-. fieldset {border: 5px dotted #CFCFCF;} > Personal Information Hi, I'm in a fieldset! This is personal information! Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 5-8 For product evaluation only– not for distribution or commercial use .JavaScript 1.5. .. JavaScript to reference the element, and also the name that is passed when the form is submitted readyOnly Makes the element read-only size The size, in characters of the current value of the element type Type returns the kind of object the element is, for example, select-one value The current value of this element Table 4 Text type object properties Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 5-1 2... language= "JavaScript" > var oldvalue; function storeVal(value) { oldvalue = value; } … Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 5-1 4 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright . the values from Table 1. Array Index Value aProducts[0] “Duracell :10 .00,Energizer :11 .50 ,Eveready:7. 25, Kodak :18 . 75 aProducts [1] “Dial :1. 50 ,Dove:.99,Irish Spring :11 2 . 14 ” aProducts[2] “Sports. aProducts = new Array (4) ; aProducts[0] = "Duracell :10 .00,Energizer :11 .50 , Eveready:7. 25, Kodak :18 . 75& quot;; aProducts [1] = "Dial :1. 50 ,Dove:.99, Irish Spring :11 2 . 14 "; aProducts[2]. Illustrated:3. 95, Mac Addict :5. 25, Maxim:9.99,Us Weekly :5. 21, Time :5. 01 aProducts[3] “Pirelli :12 0.00,Goodyear:89.32,BF Goodrich:92 .52 ,Firestone (Ford blowout sale):0.00” Table 1. Values for